Shipyard comes with several default icons that you’re welcome to use on any project. Each icon has been designed on a pixel grid at the small size possible, but can be scaled up to any size you like simply by changing the width and height in the CSS.
The following icons are the most frequently used in just about any application.
The following icons are used primarily in the status component.
If you need to style several paths inside of the icon, it’s important to make sure you use the injected version of the icon.
If you need to style several paths inside of the icon, it’s important to make sure you use the injected version of the icon.
<%= icon 'email-color' %>
The icon size utility classes can be applied to any icon, and are useful when you want to override the default icon size.
<%= icon :gear, class: 'icon-xxs' %>
<%= icon :gear, class: 'icon-xs' %>
<%= icon :gear, class: 'icon-sm' %>
<%= icon :gear, class: 'icon-md' %>
<%= icon :gear, class: 'icon-lg' %>
<%= icon :gear, class: 'icon-xl' %>
One of the most common problems when using an icon is that doesn’t line up with the text content next to it. Don’t worry though, we’ve got you covered — simply apply the .center-obj class to any icon to fix this issue.
<button class="btn btn-secondary">
<%= icon :plus, class: 'center-obj icon-sm' %>
Create
</button>