Component Icon

Example

<som-icon name="gift" size="sm" />
<som-icon name="gift" size="md" />
<som-icon name="gift" size="lg" />
<som-icon name="gift" size="xl" />
<som-icon name="gift" size="lg" color="primary" />
<som-icon name="gift" size="lg" color="secondary" />
<som-icon name="gift" size="lg" color="danger" />

Accessibility

All icons ship with the required aria-label attribute, which is used to provide a descriptive label to any assistive technologies.

Props

Anatomy

Sizes

Be sure icon sizes are consistent. When used inline with text, icons should match the text’s line height. By default, the size will be determined by the current font size. Icons can be resized by omitting the size prop and adjusting the font size.

Colors

Icons are always a single color with no gradients. By default, the color will match the current font color, but this can be overridden with the color prop. The icon’s color should reflect its role. See the colors foundations page for more on this.

Descriptive icons must have a minimum 3:1 color contrast ratio. While decorative icons do not require a 3:1 ratio, it’s still a good guideline to follow to ensure readability.

Styles

The icon library has outline and solid icon types. Outline icons are standard, but the solid versions are provided as well to represent a toggled or selected state.

<div className="pr-1_5">
  <som-icon name="bookmark" size="md" />
  <span className='text-type-6 pl-0_5'>Bookmark</span>
</div>
<div>
  <som-icon name="bookmark-filled" size="md" />
  <span className='text-type-6 pl-0_5'>Bookmarked</span>
</div>

Behavior

Icons are not interactive by default, but can be paired with a button to trigger an action. Buttons with icons have interactive states and modifiers. See the button component page for more info on using icons with buttons.

Icon buttons should have a label, except in rare cases where the icon is universally recognizable, such as with home, print, or search.

How to use

Icons can be descriptive or decorative.

• Descriptive icons convey information or functionality and require alt text to explain their purpose.
• Decorative icons are purely aesthetic and can be marked as such with an empty alt attribute (alt=""), which will be ignored by screen readers.

Text can accompany icons to add context. Any accompanying text should be directly related to the icon and the message being conveyed.

Don’t use the same icon to represent different concepts.

Don’t use different icons to represent the same concept.

Layout

Some notes on placement:

• Icons can be positioned beside or above text.
• Icons placed beside text should be aligned to the top of the text block and match the line height of the text.
• Icons can be placed above content as well.
• If text is left-justified, icons should align to the left.
• If text is centered, icons should align to the center.

Icons must be the same size as the line height and top-aligned when combined with text.

Don’t center-align text vertically or make icons larger than the line height.

Icon alignment should match text justification.

Don’t mix different alignments and justifications.