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.

Attribute	Required	Description
`role`	Required	`role="img"` if it conveys some special meaning `role="presentation"` if only used for visual design
`width` and `height`	Optional	Should only be used on `svg` if not part of a formal component
`title`	Optional	If `role="img"` is used, the `title` acts as the alt text for the icon
`desc`	Optional	Provides additional context, but will not be read by most screen readers
`fill`	Optional	Should only be used on `use` if not part of a formal component

<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>