Icons

We use Boxicons icon font. You can access all icons available in the Boxicons library without the need to upload image assets into your assets panel.

Using icons

Important! Make sure to have the Styles / Global component on each page to display the icons. This symbol contains a necessary code snippet used to display Boxicons in Webflow and on published pages.

Inserting icons into Webflow

  1. Go to Boxicons website at www.boxicons.com
  2. Search for the icon you want to use
  3. Select the icon by clicking on your desired icon and then change the active tab from Web Component to Font
  4. Copy the <i> tag by clicking on the code snippet. This should automatically copy the code snippet to your clipboard
  5. Go to Webflow and place a custom embed element from the Add Elements panel
  6. Paste your code snippet into the custom embed element
  7. Apply a class of "icon" to the custom embed element
  8. Apply necessary combo classes such as text-size or text-color to your icon embed
  9. Enjoy your new custom Boxicon

Try it out

Select the icon below and add a new icon using the method above.

Icon Class

Class
Name
Properties
icon
Custom Boxicon embed
display: inline-block;
line-height: 1;

About the icon class

The icon class is a universal class used to designate something as an icon. It is meant to be placed onto custom code embeds with icon code placed inside.

The class resets the display property on the embed from block to inline-block and also resets the line-height property to maintain a 1:1 aspect ratio in relation to the font size.

Icon Utilities

Class
Name
Properties
icon
text-color-[property]
Text color combo class
color: [value];
icon
text-size-[property]
Font size combo class
font-size: [value];

About icon utilities

The icon class comes with a set of utilities taken from the typography system. Since these icons are rendered out as typography, the same type utility classes can also be applied to icons as well through combo classes.

For our example here, we have the text-color and text-size classes applied to the icons. In the examples above you can see how each icon is rendered out as a font and how its behavior is similar to normal text elements.