🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%


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:

Class Description
.icon--xxxs Set icon size equal to 8px.
.icon--xxs Set icon size equal to 12px.
.icon--xs Set icon size equal to 16px.
.icon--sm Set icon size equal to 24px.
.icon--md Set icon size equal to 32px.
.icon--lg Set icon size equal to 48px.
.icon--xl Set icon size equal to 64px.
.icon--xxl Set icon size equal to 96px.
.icon--xxxl Set icon size equal to 128px.

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.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us