Create your design system, part 5: Icons
In this article, we’ll take a look at how to include icons in your design system, with some additional CSS techniques to customize them according to your needs.
Here’s what we will cover:
- Integrating icons into your design system;
- Classes for icon sizes;
- Icon style variations;
- Aligning icons to text;
This article is part of a series on design systems inspired by our library of web components. The library relies on a solid system of CSS globals. So this is us sharing the things we’ve learned setting the global style of our library! ✌
Article Series:
- Part 1: Typography
- Part 2: Grid & Layout
- Part 3: Colors
- Part 4: Spacing
- Part 5: Icons
- Part 6: Buttons
Integrating icons in your design system
There are multiple options when it comes to integrating icons into your design system; for our library of components, we opted for the SVG Symbols, mostly for the ease of use as well as the high level of icon customization it allows.
I won’t be going into details about SVG Symbols. If you are not familiar with the technique, you could take a look at this guide on integrating icons in design systems where you can find some useful info about SVG Symbols and alternative methods you can use.
Note: throughout the article, I will be using SVG Symbols only. Nonetheless, the CSS code and classes we provide can be used for SVG inline icons and icon fonts as well.
The first step is to import your SVG Symbols at the top of the page (right after the <body> tag) to reference the SVG inline:
Note: the ‘include’ syntax I have been using is the one of Nunjucks; you can replace it with the syntax of the templating language you are using (or you can directly include the complete SVG code).
The .icon class is used to add some basic style:
It sets a display for all our icons and a dimension (for consistency among browsers).
Note: if you are using an icon font, make sure to include the font-family declaration in the .icon class (e.g., font-family: ‘MyFont’).
Utility classes for icon sizes
By default, all icons have height and width equal to 1em (defined inside the .icon class).
There are times when you need to change the icon size, in particular for standalone icons (e.g., icons with no text).
We decided it could be useful to have some utility classes to set specific dimensions to the icons, as well as to create a consistent icon grid system throughout the website.
Here’s what we have included so far:
Since the height and width of the icons are set to 1em, changing the font size will automatically update the icon dimension (1em is equal to the current font-size value).
We decided to use an absolute unit (px) rather than a relative one (e.g., em) so that we could preserve the dimension of the icons at different viewport sizes.
Note: if you use a Typography system like the one described in the first article of this series, then the em size is going to change at different media queries (and so would your icon size if you were to use relative units, like em, for the font-size).
Icon style variations
We use a css variable to define the default color for all our icons:
Note: the color variables are all included into a separate _colors.scss file.
This is quite useful if you need to create color variations for your icons.
For example, let’s assume the --color-icon-primary is the default color we use for icons on a light background.
If we have a dark background component with a class .theme--dark, we can use that class to change the icon color (as well as other relevant color variables). We’ll have something like:
The idea behind this approach is that you do not have to target the .icon class (or all the other element classes affected by the theming) to modify their style. Instead, you can keep all your color variations in one single place (the .theme--dark class definition) and be able to change the state of the component by just adding/removing that class.
If you want to know more about how we are planning on handling theming (and IE support) for our library of web components, then take a look at the Colors article of this series.
Aligning icons to 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.
This is not enough for the alignment, though. Luckily, Flexbox can help with that!
Here’s the class we use for the alignment (make sure to add this class to the container of the text + icon).
The above class uses the align-items property of Flexbox to center its children (text and icon) along the y-axis.
Additionally, the class is used to change the color of the icon so that it inherits the text color.
Here’s how you would use that class:
And here’s an example of the icon classes/style in action:
That is all for now on the icon system for the CodyHouse library of components. We may need to add some additional classes while we build our components, but this should be a solid starting point. Feedback or suggestions are welcome! 🙂
I hope you enjoyed the article! For more web design nuggets, follow us here on Medium or Twitter. 🙌
