⚡️ Download 385 HTML, CSS, JS Components and 9 templates for $129 - Limited time offer ⏳


Progress value is 30%


How to integrate icons in CodyFrame.

Set your custom icon options in the 'custom-style/_icons.scss' file.

🔍 On this page:

  1. .icon class
  2. Sizes
  3. Off-scale values
  4. Align icons and text
  5. Integrate your icons
  6. Other classes

.icon class #

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

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

If you are using an icon font, make sure to include the font-family inside the 'custom-style/_icons.scss' file:

.icon {
  font-family: 'fontName';

Sizes #

CodyFrame includes a default icon size scale. Optionally, you can set a custom size scale in the 'custom-style/_icons.scss' file:

:root {
  // default icon sizes
  --icon-xxxs: 8px;
  --icon-xxs:  12px;
  --icon-xs:   16px;
  --icon-sm:   24px;
  --icon-md:   32px;
  --icon-lg:   48px;
  --icon-xl:   64px;
  --icon-xxl:  96px;
  --icon-xxxl: 128px;

To change the icon size, use one of the custom properties above in CSS, or the following utility classes:

Class Description
.icon--xxxs Set --size equal to var(--icon-xxxs)
.icon--xxs Set --size equal to var(--icon-xxs)
.icon--xs Set --size equal to var(--icon-xs)
.icon--sm Set --size equal to var(--icon-sm)
.icon--md Set --size equal to var(--icon-md)
.icon--lg Set --size equal to var(--icon-lg)
.icon--xl Set --size equal to var(--icon-xl)
.icon--xxl Set --size equal to var(--icon-xxl)
.icon--xxxl Set --size equal to var(--icon-xxxl)


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

An alternative approach would be creating a list of size utility classes in pixels and add them to the 'custom-style/_util.scss' file:

// --------------------------------

// Size

// --------------------------------

.size-8   { height: 8px; width: 8px; }
.size-10  { height: 10px; width: 10px; }
.size-12  { height: 12px; width: 12px; }
.size-16  { height: 16px; width: 16px; }
.size-20  { height: 20px; width: 20px; }
.size-24  { height: 24px; width: 24px; }
.size-32  { height: 32px; width: 32px; }
.size-48  { height: 48px; width: 48px; }
.size-64  { height: 64px; width: 64px; }
.size-96  { height: 96px; width: 96px; }

Here's how to set the icon size if you decide to include the above classe:

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

Off-scale values #

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

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

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

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

Aligning icons with text #

To align icons and text, you can use the flexbox utility classes. Because the default size of the .icon component is 1em, the icon size is equal to the current font-size:

To create custom bullets for your list items, you can use the list component.

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:

Class Description
.icon--is-spinning rotate the icon infinitely

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

Class Description
.fill-current fill: currentColor;
.stroke-current stroke: currentColor;
.stroke-1 stroke-width: 1px;
.stroke-2 stroke-width: 2px;
.stroke-3 stroke-width: 3px;
.stroke-4 stroke-width: 4px;

Project duplicated

Project created

Globals imported

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