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.
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.
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.
To ensure that usage of this component complies with accessibility guidelines:
- If an icon conveys meaning, there must be an
aria-labelthat describes the action or idea that the icon represents
- If an icon is decorative, use an empty
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
<desc> elements in SVG for assistive technologies; however these elements have mixed support for screen readers as explained here. Cedar follows these recommendations by:
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
aria-labelfor buttons or Cedar’s hidden text CSS style for links