How to design Clarity Icons
When our team first decided to create our own icons in the Clarity design system, it took a lot of time and iterations to land on a style that would help define and enhance the look of Clarity. When people see a simple line icon, they might think “that looks easy, anyone could do that!” And that one icon may indeed be easy to create, but creating a whole family of icons is a different story.
As a team, we came to agreement on the characteristics we wanted in a Clarity icon. It had to be light, simple, clearly recognizable, while being distinctive and complementary to the components. We had to design a set of rules that, when followed, would result in an icon that fits visually in the whole family of icons. As an open source system, the rules needed some flexibility. We knew that some instances call for icons with a little more heft, so we included a solid version as well. We’ve done the hard part of designing the family and making the rules. We hope this guideline will help you in making your own icons in the Clarity style.
Specs
Our icons are created in Adobe Illustrator on a 36 x 36px artboard which includes a 2px trim area around the edge. Other vector apps like Sketch may be used, but in our experience, we found the SVG code generated from Illustrator to be cleaner. Once an icon is created as a vector graphic, it’s exported as an SVG and can be scaled, colored, and rotated in code.
Stroke
For strokes, Clarity icons maintain a consistent 2px stroke weight with a rounded corner radius of 2px. Interior corners should be square. In Adobe Illustrator this is achieved with a center-aligned 2px stroke; a 1px corner radius; rounded corners and caps.
Interior details
Lines inside the outer strokes can have square end caps/corners for sharper detail. In more complex designs the stroke weight can be reduced to 1.8px or 1.6px.
Trim area
An icon may extend into the 2px spacing around the icon area only when more visual weight is needed. It may not extend beyond this trim area because that would result in anti-aliasing or line art being cutoff.
Design Tips
· Keep the design as simple as possible, removing extraneous detail while maintaining recognizability.
· Use the grid. Keep the lines to whole units on the grid to minimize pixels blurring on lower resolution screens.
· Judicious use of broken lines can add visual interest and keep icons lightweight by minimizing line junctions. The broken line terminal should contour the shape from which it was broken.
· Icons come in different shapes and sizes. A common misconception is that each icon in a set should have the exact same height. Instead, the goal should be to make them look like they have the same visual weight. Use the basic shapes inside the grid as a guide for sizing icons of all shapes.
· Icons should be visually centered in the artboard, vertically and horizontally.
Solid icons
Internal lines may need to be thickened in solid shapes for better legibility. A 2px stroke may be increased up to 2.8px in a solid icon.
Export
Preparing your icon to be added to the Clarity Icons library can be accomplished in four easy steps:
1. Make the icon one color: #000. Because Clarity Icons allows developers to color your icon with stylesheets, it doesn’t make any sense to include or force color information in the SVG.
2. Convert all strokes to paths (shapes). Object menu> Expand. Styling strokes across browsers is notoriously tricky: some browsers center strokes, others put them on the outside of the path. Icons that consist of filled paths are much easier to work with and style using stylesheets. They behave more predictably.
3. Merge (flatten) shapes. In some cases, this third step is optional. Consider how you might want Color to be reflected in your icon. Clarity icons can be used to turn any path in your icon into a specified color. In most cases, you will want to merge/flatten paths down to a single shape. But there are some instances where you would want separate paths so that you could animate or colorize an icon in unique ways.
4. Export as an SVG file with the following settings:
5. Alerts and badges
In addition to a solid version of the icons, alerts and badges are two more variants of Clarity icons included in applicable icons. For instance, the cog icon comes with a yellow alert state and a red badge state that helps users see when there is a problem or notification. The default colors for the badge and alert are red and yellow, but they may be changed to any color with CSS.
Each variant is created on a separate artboard. This Adobe Illustrator template should be used to create the badge and alert variants.
1.) Duplicate the base icon and artboard.
2.) On the duplicated icon, copy and paste the template, aligning the red box exactly to the artboard. Once the template is positioned, delete the red box.
3.) The triangle and circle each have a 2 px border around them. Knock out the white border shape from the base icon. This creates a 2 px gap between the base icon and the badge/alert, making it stand out from the base. Use your judgment when the knockout shape just touches the base image. In such cases it may be better not to do a knockout because barely clipping the base image may look like a mistake.
4.) Clarity icons use a naming convention that uses the name of the icon, followed by the line/solid property, followed by the badge/alert property. Each property is separated by an underscore. So a basic cog icon in the line style without a badge or alert is “cog_line.svg”. With an alert, it’s called “cog_line_alert.svg”. Assign an icon name to each artboard in the artboard window. See a full set of variant names in fig. 5 -1.
5.) Export all artboards as .svg using the settings shown in fig. 4–1
Why not use Sketch?
The Clarity team uses Adobe Illustrator because it exports cleaner SVG than other solutions we have tried. These guidelines and steps can be used in any program that draws vector art and exports SVG. Ultimately, your choice of tools is your own!
Huge thanks go to Scott Mathis for his support and contribution in providing technical information and in editing this piece.
