Icon

Storybook

Example

<vega-icon icon="brand-heartland" size="size-32" badge="1"></vega-icon>

Usage

The vega-icon component is a collection of small images that can be used in your designs. Icons go beyond communicating brand and style, but also communicate meaning. An icon is a visual representation of an action, object, or idea. They can be used to provide extra meaning that can provide visual cues to users as to what clicking on an button, or actionable item may mean. There are a range of icons which have come to take on standard meanings, and these, if used properly, can exist in place of text.

You may use any of the icons in the Vega icon set. You may also use Font Awesome icons.

Properties

Name Description Default
icon This is a required field and references the icon design token
size This references the size of the design token. Use existing Vega size tokens.
Optional		 default
color The color of the icon. Use a text color token.

All Parameters

<vega-icon 
    icon={design token} 
    size={size}>
</vega-icon>

Font Awesome

Note: We include access to Font Awesome icons. Read here for instructions on how to use Font Awesome Icons using the Vega Figma Plugin

Name Description
icon The Font Awesome class.

All Parameters

<vega-icon 
    icon={SVG Class | Font Awesome Class}> 
</vega-icon>

For more details, view in Storybook.

Accessibility

  • Ensures every id attribute value is unique.
  • Add alt and title tags to all icons.

Best Practices

  • Icons should be used primarily to provide clarity to an interface. While they may be used for some artistic or branding purposes, the main use of these is to make it easier for a user to understand how to interact with your site or application.
  • While an icon may be predominantly recognizable due to past experience that a user may have with it, this should never be assumed to be understood. While a few icons are instantly recognizable (e.g. a magnifying glass for search) others are less-so. For this reason, a text label should be applied to all icons, through the use of alt and title tags, to help reduce ambiguity.
  • Icons tend to make the most sense to users on mobile devices, due to the fact that there are fewer items on the screen competing for the user’s attention. Consider not using icons on desktop devices if there is enough space to spell out the options.
  • Keep icons simple. As a general rule, if it takes more than 5 seconds to come up with an icon for an action, then consider that the user may not understand the meaning of the icon you choose.
  • Test icons for recognizability with third-party users. Similarly, it’s worth testing whether a user can recognize an icon a second time, especially if the text is not being included with it.