SVG Icons

Icons that are intended to be displayed in a larger format use SVG icons instead of our Font Icon library.

How to Use

There are a few ways to use SVG images on the web, but the preffered way is with an HTML use element. Using the use element gives the ability to make changes to the SVG styling, such as hover effects in components. This also allows us to control the display of the icon in one location (TeamSite), and if any changes are applied to the icon they will cascade through the site automatically.

AttributeRequiredDescription
roleRequired
  • role="img" if it conveys some special meaning
  • role="presentation" if only used for visual design
width and heightOptionalShould only be used on svg if not part of a formal component
titleOptionalIf role="img" is used, the title acts as the alt text for the icon
descOptionalProvides additional context, but will not be read by most screen readers
fillOptionalShould only be used on use if not part of a formal component
The title of the SVGA longer, more complete description for complex graphics.
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewbox="0 0 60 60"
  preserveAspectRatio="xMidYMid meet"
  role="img"
  aria-labelledby="uniqueTitleID uniqueDescID"
>
  <title id="uniqueTitleID">The title of the SVG</title>
  <desc id="uniqueDescID">
    A longer, more complete description for complex graphics.
  </desc>
  <use
    href="/assets/images/en/icons/smart-home.svg#smart-home"
    xlink:href="/assets/images/en/icons/smart-home.svg#smart-home"
  />
</svg>