Icon Naming

Our icon libraries have strong guidelines setup to ensure naming of every icon is as consistent and expandable as possible.

Base Names

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

Hyphen Tagging

All naming must be in the exact order below.



The top and bottom position modifiers denote direction pointing. Ex: diagonal arrow.

  • top-left
  • top-right
  • bottom-left
  • bottom-right

Alternatively the position modifiers up and down would be used for corners. These can still have arrows, but must never point diagonally.

  • up-left
  • up-right
  • down-left
  • down-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.


Additional Details

  • outline must only be used on 2dp lined icons.
  • variant is only to be used to represent the same icon with the same meaning.
  • close is never to be used to represent a x on an icon other than the close-*. Use *-remove for these instances.
  • settings modifier is usually represented in Material Design as three dots, however the cog modifier may be preferred.
  • plus is always used to represent adding (do not use add).
  • minus is always used to represent subtracting.
  • multiple should be used on layered icons where there is a singular representation present.
  • format-* breaks all the rules. Because.
  • help is a base icon, *-question is a modifer.

Notice a Bug?

If you notice a bug in a name, or think it does not follow these guidelines, please open an issue.