UI components

Icons

Icons communicate meaning in a graphical user interface.

The Design System uses a subset of Font Awesome icons on the project. They are available for use in src/img. If you need additional icons, use Font Awesome in your project.

Implementation

Use the Design System icons available in src/img or add Font Awesome to your project. This project uses icons in two ways:

  • SVGs with PNG fallbacks
  • CSS background images

Accessibility

Provide descriptive text when an icon is meaningful or has an action associated with it. Do not provide additional text when the icon is decorative.

See Images - Accessibility for Teams and Accessibility - Font Awesome.

Usability

See Icon Usability - Nielsen Norman Group.