Icons

• Icon component
• Sizes
• Off-scale values
• Integrate your icons
• Other classes

The icons.scss file is a template containing basic rules for integrating icons in CodyFrame.

If you're not using SASS, use the icons.css file.

Icon component #

The .icon class is used to set the basic style for all icons: add this class to all your icon components.

.icon {
  --size: 1em;
  font-size: var(--size);
  height: 1em;
  width: 1em;
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

If you are using an icon font, include the font-family:

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

Sizes #

CodyFrame includes a default icon size scale. Optionally, you can customize the scale by editing the .icon--{size} classes in the icons.scss file:

.icon--3xs {
  --size: 8px;
}

.icon--2xs {
  --size: 12px;
}

.icon--xs {
  --size: 16px;
}

.icon--sm {
  --size: 20px;
}

.icon--md {
  --size: 24px;
}

.icon--lg {
  --size: 32px;
}

.icon--xl {
  --size: 48px;
}

.icon--2xl {
  --size: 64px;
}

.icon--3xl {
  --size: 96px;
}

How to use the size variations:

<svg class="icon icon--sm" viewBox="0 0 16 16">
  <!-- ... -->
</svg>

Off-scale values #

The size of the .icon component is set using the --size custom property:

.icon {
  --size: 1em;
  font-size: var(--size);
  height: 1em;
  width: 1em;
  // ...
}

To set off-scale values, you can modify the value of the --size variable inline...

<svg class="icon" style="--size: 30px;" viewBox="0 0 16 16">
  <!-- ... -->
</svg>

...or in CSS:

.component__icon {
  --size: 30px;
}

Integrate your icons #

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 CodyFrame.

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

Other classes #

Other icon classes:

If you're using inline SVG icons, you can use the SVG utility classes: