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