The _icons.scss file contains a set of classes that stylize the icons of your project.

There are multiple options when it comes to integrating icons into your design system (SVG Sprites, inline SVG, SVG symbols, icon fonts...); you can pick whatever method you prefer, they are all compatible with our framework.

If you're not sure about which method to choose, take a look at this article on integrating and styling icon systems.

Setting the basic icon style #

The .icon class is used to set the basic style for all icons:

.icon {
    display: inline-block;
    color: var(--color-contrast-higher);
    fill: currentColor;
    height: 1em;
    width: 1em;
    line-height: 1;

Note: if you are using an icon font, make sure to include the font-family declaration in the .icon class (e.g., font-family: ‘MyFont’).

Utility classes for icon sizes #

By default, all icons have height and width equal to 1em (defined inside the .icon class).

There are times when you need to change the icon size, in particular for standalone icons (e.g., icons with no text). You can do that using one of the size utility classes:

Aligning icons with text #

By default, icons have width and height equal to 1em (defined inside the .icon class). This assures they have the same size of the text element in which they are inserted.

To make sure the icons are also aligned with the text, you can use the .icon-text class: