Icons

Communicates meaning through the use of graphics

SVG sprite

A collection of SVG icon files composed into a single file. This method provides a single server download request and caches icons for display. This is the most efficient way of displaying large numbers of icons.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Individual icon components

Display any icon separately. This may be the easiest way to use an icon on a page however it is not recommended for every circumstance. When using a large number of icons, it will generate multiple server requests and slow down performance.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Non-Cedar SVG

Create a new SVG icon using any valid internal SVG markup. This method creates an outer SVG wrapper for accessibility and styles. This is not recommended if using a large number of icons.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • If an icon conveys meaning, there must be an aria-label that describes the action or idea that the icon represents
  • If an icon is decorative, use an empty alt attribute

Recommendations for writing screen reader text:

  • Be succinct. Exclude unnecessary words
  • Be informative and accurate
  • Write in the active voice
  • Avoid technical jargon

W3C recommends using <title> and <desc> elements in SVG for assistive technologies; however these elements have mixed support for screen readers as explained here. Cedar follows these recommendations by:

  • Adding role=’presentation’ to icons. This hides them from screen readers and causes the icon to be a nested image inside of a button or a link
  • Assigning the attribute focusable=’false’ to the SVG element
  • Using aria-label for buttons or Cedar’s hidden text CSS style for links