Icons

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

⚠️ The files inside the base/ folder contain essential CSS rules and utility classes. We suggest you don't modify them. Use the custom-style/ folder to add your own style.

Classes #

The .icon class is used to set the basic style for all icons. Make sure to add this class to all your icon elements.

If you are using an icon font, make sure to include the font-family declaration in the .icon class. You can do that inside the 📁 custom-style/_icons.scss file:

.icon {
  font-family: 'fontName';
}

To change the icon size, you can use the following size 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 flexbox utility classes (defined in the 📁 base/_util.scss file of the framework).

In the example below, we use the .flex and .items-center classes to align icon with text, and the .margin-left-xxs class to create margin between the two elements:

Icon Options #

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.