Icon Naming
Our icon libraries have strong guidelines setup to ensure naming of every icon is as consistent and expandable as possible.
Base names are generally the noun representation of an icon. In some cases this may also be the more common software term for the icon.
Examples: comment, folder, or flask
All naming must be in the exact order below.
| Position | Weight | Shape | Overlay | Modifier |
|---|---|---|---|---|
*-top-left | *-bold | *-box | *-account | *-variant |
*-top-right | *-thick | *-circle | *-alert | *-multiple |
*-bottom-left | *-light | *-decagram | *-arrow-* | *-off |
*-bottom-right | *-heavy | *-octagram | *-cancel | *-outline |
*-up | *-double | *-rhombus | *-check | |
*-up-left | *-shield | *-clock | ||
*-up-right | *-cog | |||
*-down | *-edit | |||
*-down-left | *-eye | |||
*-down-right | *-heart | |||
*-left | *-information | |||
*-right | *-image | |||
*-key | ||||
*-lock | ||||
*-marker | ||||
*-minus | ||||
*-music | ||||
*-network | ||||
*-percent | ||||
*-plus | ||||
*-question | ||||
*-refresh | ||||
*-remove | ||||
*-search | ||||
*-settings | ||||
*-star | ||||
*-sync | ||||
*-text |
The top and bottom position modifiers denote direction pointing. Ex: diagonal arrow.
top-lefttop-rightbottom-leftbottom-right
Alternatively the position modifiers up and down would be used for corners. These can still have arrows, but must never point diagonally.
up-leftup-rightdown-leftdown-right
Weight of the icon, essentially the thickness.
The plus modifier can be appended to any noun icon.
The account modifer can be shown inside of an icon or to the right.
Modifiers are consistent across all icons in their representation.
Alternative design of an existing icon.
outlinemust only be used on2dplined icons.variantis only to be used to represent the same icon with the same meaning.closeis never to be used to represent axon an icon other than theclose-*. Use*-removefor these instances.settingsmodifier is usually represented in Material Design as three dots, however thecogmodifier may be preferred.plusis always used to represent adding (do not useadd).minusis always used to represent subtracting.multipleshould be used on layered icons where there is a singular representation present.format-*breaks all the rules. Because.helpis a base icon,*-questionis a modifer.
If you notice a bug in a name, or think it does not follow these guidelines, please open an issue.