Icons provide visual context and enhance usability. They are powerful visual helpers, and should be used with care. Overuse quickly results in UI’s that are visually overwhelming or distracting.
Link to the icon SVG sprite by targeting the icon’s hash/ID value in the use href attribute. (You can find the values on the reference table.)
<svg> with the class
o-icon contains the reference to your icon.
When placing the icon code into your page, customize the path in the use attribute of the svg to the proper path and icon name for your specific icon. For example, the mail icon in the standard sprite would have a path like this:
<svg class="o-icon" aria-hidden="true"> <use href="#mail"></use> </svg>
A collection of our icons.
Click on the icon to copy the SVG code on your clipboard.
Size modifiers can be added to the
.o-icon element on any icon.
There’s three sizes available:
To change the size of an icon to small, add the
.o-icon--sm class to the svg.
<svg class="o-icon o-icon--sm" aria-hidden="true"> <use href="#mail"></use> </svg>
To change the size of an icon to large, add the
.o-icon--lg class to the svg.
<svg class="o-icon o-icon--lg" aria-hidden="true"> <use href="#mail"></use> </svg>
The default fill of all icons is
currentColor to inherit the color of their parent. Is possible to change the fill color to a different one but it should be avoided to keep an uniform experience.
This is a red example text
This is a green example text