Creating an Icon System Out of CSS Custom Properties

How I Made an Icon System Out of CSS Custom Properties

Making an icon system out of CSS custom properties can be a great way to add a unique touch to your website or app. In this tutorial, I'll show you how I created mine.

First, I defined the custom properties in my main CSS sheet. For example, the following code defines a series of line icons:

.icon-line {
    --icon-container-width: 2px;
    --icon-container-height: 20px;
    --icon-line-width: 1px;
    }

Next, I created a set of SVG icons for each custom property. For example, this SVG creates a line icon:

Finally, I added some additional styling to the SVG icons using basic CSS. For example, this code sets the width and height of the icon container:

.icon-line {
  width: var(--icon-container-width);
  height: var(--icon-container-height);
  }

Now I have a system of custom icons that can be reused throughout my website or app! You can also use this approach to create more complex icons and systems.