Icons
Icons act as visual aids to help users complete tasks. They’re simple, informative, and build on the visual language of the design system.
Icons are provided by the
<ahi-icon> component.
Browse the full set, search by name, and see the API on the component page. This page covers
when to reach for each size.
Major icons—20x20
Major icons are:
- Primarily used in navigation to support wayfinding
- Used to help promote, reinforce, or draw special attention to a specific area or metaphor
- 20×20 in size (the
majorsize, and<ahi-icon>’s default)
<ahi-icon name="home" size="major"></ahi-icon>
<ahi-icon name="dashboard" size="major"></ahi-icon>
<ahi-icon name="search" size="major"></ahi-icon>
<ahi-icon name="bell" size="major"></ahi-icon>
<ahi-icon name="settings" size="major"></ahi-icon>
<ahi-icon name="user" size="major"></ahi-icon>
Minor icons—16x16
Minor system icons are:
- Used inline to add clarity to an action
- Used in form elements (
<ahi-input>,<ahi-button>, etc.) - 16×16 in size (the
minorsize)
<ahi-icon name="check" size="minor"></ahi-icon>
<ahi-icon name="alert-circle" size="minor"></ahi-icon>
<ahi-icon name="info-circle" size="minor"></ahi-icon>
<ahi-icon name="eye" size="minor"></ahi-icon>
<ahi-icon name="filter" size="minor"></ahi-icon>
Spot icons—60x60
Spot icons reinforce messaging in product experiences that are seen more than once. Spot icons are:
- Bigger than major icons to add visual balance to the layout
- 60×60 in size (the
spotsize)
<ahi-icon name="first-aid-kit" size="spot"></ahi-icon>
<ahi-icon name="shield-check" size="spot"></ahi-icon>
<ahi-icon name="hospital-circle" size="spot"></ahi-icon>