Overview
The SVG Icon object can be used with standalone SVGs as well as SVG maps. The o-svg-icon object is relative sized with em units, so it will scale with an inherited or set font size. The lg and xl size modifiers can be used to modify the relative size of the icon to its parent.
<span class="o-svg-icon">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M398.2 430.2H49.8V81.8H224V32H49.8C22.2 32 0 54.4 0 81.8v348.4C0 457.6 22.2 480 49.8 480h348.4c27.4 0 49.8-22.4 49.8-49.8V256h-49.8v174.2zM273.8 32v49.8h89.4L118.5 326.4l35.1 35.1 244.7-244.7v89.4H448V32H273.8z" fill="currentColor" />
</svg>
</span>
<span class="o-svg-icon o-svg-icon--lg">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M398.2 430.2H49.8V81.8H224V32H49.8C22.2 32 0 54.4 0 81.8v348.4C0 457.6 22.2 480 49.8 480h348.4c27.4 0 49.8-22.4 49.8-49.8V256h-49.8v174.2zM273.8 32v49.8h89.4L118.5 326.4l35.1 35.1 244.7-244.7v89.4H448V32H273.8z" fill="currentColor" />
</svg>
</span>
<span class="o-svg-icon o-svg-icon--xl">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M398.2 430.2H49.8V81.8H224V32H49.8C22.2 32 0 54.4 0 81.8v348.4C0 457.6 22.2 480 49.8 480h348.4c27.4 0 49.8-22.4 49.8-49.8V256h-49.8v174.2zM273.8 32v49.8h89.4L118.5 326.4l35.1 35.1 244.7-244.7v89.4H448V32H273.8z" fill="currentColor" />
</svg>
</span>
Examples
You'll most commonly use the o-svg-icon object with plain text or within inline icon links.
Some text goes here
Open in a new tab<p>
<span class="o-svg-icon u-m-r-xxs">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96zm89.6 256c-11 0-21.8 2.6-32.2 6.2-18 6.3-37.3 9.8-57.4 9.8s-39.4-3.5-57.4-9.8c-10.4-3.6-21.2-6.2-32.2-6.2C60.2 304 0 364.2 0 438.4V488c0 13.3 10.7 24 24 24s24-10.7 24-24v-49.6c0-45.5 35.4-82.4 80-85.8v50c-23.1 6.9-40 28.1-40 53.4 0 30.9 25.1 56 56 56s56-25.1 56-56c0-25.3-16.9-46.5-40-53.4v-44.7c20.8 6.3 42.3 10.1 64 10.1 21.8 0 43.2-3.8 64-10.1v36.3c-28.2 7.5-48 34.5-48 64.6V488c0 4.2 1.7 8.3 4.7 11.3l10.3 10.3c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-5.7-5.7V456c0-19.4 17.4-34.8 37.4-31.6 15.7 2.6 26.6 17.4 26.6 33.3v23.6l-5.7 5.7c-3.1 3.1-3.1 8.2 0 11.3l11.3 11.3c3.1 3.1 8.2 3.1 11.3 0l10.3-10.3c3-3 4.7-7.1 4.7-11.3v-32c0-29.7-20.5-54.5-48-61.6v-41.7c44.6 3.3 80 40.3 80 85.8V488c0 13.3 10.7 24 24 24s24-10.7 24-24v-49.6c.2-74.2-60-134.4-134.2-134.4zM168 456c0 13.3-10.7 24-24 24s-24-10.7-24-24 10.7-24 24-24 24 10.7 24 24z" fill="currentColor"/>
</svg>
</span>
Some text goes here
</p>
<a class="c-inline-icon" href="#">
<span class="c-inline-icon__link styled-link">Open in a new tab</span>
<span class="o-svg-icon o-svg-icon--lg">
<svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
<path d="M398.2 430.2H49.8V81.8H224V32H49.8C22.2 32 0 54.4 0 81.8v348.4C0 457.6 22.2 480 49.8 480h348.4c27.4 0 49.8-22.4 49.8-49.8V256h-49.8v174.2zM273.8 32v49.8h89.4L118.5 326.4l35.1 35.1 244.7-244.7v89.4H448V32H273.8z" fill="currentColor" />
</svg>
</span>
<span class="u-visually-hidden">Open in a new tab</span>
</a>