Icons

Icons are visual representations of sections, commands, files, devices, or common actions.
[System name] uses icons in moderation. Wherever possible, use text instead of icons. When using icons, be sure their meaning is unambiguous, and makes sense in the context of internationalization. Usage should be to increase clarity, so do not use them for merely decorative purposes.

To use icons in conjunction with buttons, see Buttons.

Primary navigation:

The primary navigation uses icons to represent the six top-line sections of the Control Panel and the user’s settings.

icons_navigation

Commonly used icons:

icons_common

Icon font family:

Icons can be added using their unique classes in the following format: icon-[ICON NAME]

Best practices:

Accessibility

  • When using standalone icons, use a method which allows for fallback text for screen readers.
  • When using icons with text. be sure the text is descriptive of the icon, and include aria-hidden="true" on the icon itself.