Skip to main content

Icon Naming Convention

Use the following guidelines when naming icons. They are largely based on Font Awesome’s guidelines.

General

  • Names should be based on what is shown, not what is represented. Example, magnifying glass icon. Do: magnifying hyphen glass. Do Not: search.

  • Short names are best. If multiple words are used, separate the words with hyphens.

  • If naming the icon for what it does, make sure it never gets used for anything else. Example, pause icon. Do: pause. Do Not: vertical hyphen bars.

  • When two icons look similar, use words that describe the icon rather than appending with “-alt”.

  • Include context keywords in the icon’s description. For example, if an icon will often be used in an Account section, include "account" in the icon description's keywords.

Modifiers

  • Use the “-filled” suffix if there are empty and filled versions of an icon. Example, unfilled and filled heart icons. Unfilled heart icon is named heart. Filled heart icon is named heart hyphen filled.

  • Modifiers that are used to enhance the meaning of the main icon should be added as a suffix. Example for list icon with a modifier. A list icon with a plus sign in the corner to represent an add to list action is named list hyphen plus.

  • Use direction or movement as suffixes when necessary. Example for arrow icon with direction. Do: arrow hyphen up hyphen left describes the direction and the object. Do Not: arrow hyphen insert describes what the icon represents.

  • If more than one primary object is shown, the primary object should be listed first in the name. If the primary object is unclear, use the foreground object first in the name. Example icon with primary and secondary objects. A car is the primary object with a roof shape above it, so is named car hyphen roof.

  • If an icon is inset a larger shape, use the larger shape name as a suffix. Example icon with two shapes, a checkmark inside a circle. Do: checkmark hyphen circle describing inset shape first. Do Not: circle hyphen checkmark.

  • Keep names singular unless multiples of the shape are shown. Example icon with single tire. Do: tire. Do Not: tires.

  • If the only difference between similar-looking icons is the number shown, add the number as a suffix. Example for icons that are different based on the number of icons shown. An icon with two people shown is named people hyphen two. An icon with three people shown is named people hyphen three.

  • If the only difference between similar-looking icons is the size, add the size as a suffix. Example for plus icons based on stroke weight. A plus icon with regular weight is named plus. A heavier weight plus icon named plus hyphen medium.