|Caution||To indicate a crucial decision|
|Search||To search for something|
|Get info||To get information|
|User||To support a user name|
|Copy||To copy text|
|Delete||To delete something|
|Notification||To notify the user of something|
|Close||To close a modal or other UI|
|Complete||To show a completed process|
|Error||To indicate an error|
|Go forward||To navigate forward|
|Go backward||To navigate backward|
|Edit||To edit something|
|Settings||To edit user or app settings|
|Minus||To subtract or remove|
|Filter||To filter results|
# Built on a grid
Every icon is built on a grid at a specific size. This ensures not only visual consistency, but allows us to easily swap icons in various applications.
# Design your own
This grid is also included as a component in Figma. If you need to create something new, just drag out an instance and start drawing.
# Page structure first
Once your structure is solid, and you get to the point where icons, delight & Co. can come into play, follow this simple rule: Use as few icons as necessary—but not fewer.
Add icons at the very end of the design process, do not play with icons while working on your wireframes.
# UI indicators vs. icons
UI indicators are visual indicators that are baked into UIs like the radio circle, checkbox check, and select caret. In some cases we can override these indicators to match our overall aesthetics and style which can make it seem like they are icons.
# When to use an icon
If you want to call attention to an action you want a user to take, icons make good targets and break up text.
# Use words
Almost all icons should be accompanied by copy. By doing so, you won't leave users guessing what an icon represents.
As best practice, use a verb to suggest an action. For more clarity use a verb + noun.
# Choosing the right icon
It’s recommended to use a word to accompany an icon. Like the previous example shows, icons should call attention to the action and the icon should follow suit. Depending on the situation, some icons are better for clicking, where others are better suited as static.
As a result, this will drastically reduce the amount of icons we have, increase understanding and clarity in our actions.
By default, all icons are Grey 900. If using an icon on top of a solid color, for example in a primary button, it should be White. As a general guideline, icons should be the same color as their accompanying text.
As an example, if you have a “Abort mission” button, do not colorize the delete button or trashcan icon with Green 400.