Iconography

Overview

We use SVG icons to visually represent actions, entities, and concepts. The icons are stored in a single SVG sprite file, which is then imported into our project using the use element. This approach allows us to easily manage and reuse the icons across our project.

Usage examples

The ci class is a helper class that sets the width and height of the SVG icon to 1em, which is equivalent to the font size of the parent element, allowing the icon to scale relative to its container. The ci--small class can be added to make the icon smaller.

The role="presentation" attribute is used to indicate that the SVG is a presentational graphic and should be ignored by screen readers. The aria-hidden="true" attribute is used to hide the SVG from screen readers.

Inline icon example:

<div style="font-size: 4rem; line-height: 1; color: #ff0000;">
    <svg class="ci" role="presentation" aria-hidden="true">
        <use href="/img/svg-sprites.svg#ci-youtube"></use>
    </svg>
</div>

Icon inside a button:

<button class="c-navbar__btn-search" type="button">
    <span class="visually-hidden">Open search form</span>
    <span class="icon-search">
        <svg class="ci" role="presentation" aria-hidden="true">
            <use href="/img/svg-sprites.svg#ci-search"></use>
        </svg>
    </span>
</button>

---

Icon explorer

Reference any icon using the ci- prefix followed by the name below.

---

Source code

• Source code in GitHub
• Source code in AEM