Designing a library of icons requires a set of rules. These rules, or icon design principles, will help you maintain a consistent style across all icons, and will prove particularly useful if you’re part of a team that collaborates on the creation of an icon family.

Icons represent an essential part of almost every design system out there. Creating icons is creating a visual language. It requires you to understand how to combine primitive shapes to reproduce a concept, as well as learning how to use the software that generate the assets.

The Nucleo icon family

Designing 20000+ icons that anyone can use is a bit of an edge case 😀. Our goal with Nucleo is providing an extensive library of beautifully-made symbols that can be customized and used in multiple ways and projects.

This guide contains all the information needed to create icons for the Nucleo family, as well as icon design principles that can be applied to any project.

In this first article, we’ll go over the basics of designing icons. Next, we’ll focus on practical examples and tutorials.

Guide content:

• Introduction
• Outline icons (coming soon)
• Glyph and colored icons (coming soon)

Don’t miss the next articles! Follow us on Twitter or here on Medium to stay in the loop.

Icon Style

Icons, like any other component in a design system, affect the way users perceive the product; and because they are part of a design system, when you create vector assets you have to take into account the scope of the work. Picking a specific icon style is like choosing a typeface, or a color palette.

The style of the Nucleo library is minimal; the icons are stripped off of all unnecessary details.

When you design icons for Nucleo, keep in mind that some of our users modify the icons. They use them as starting points to create a unique set for a project. A symbol that is too distinctive is also difficult to customize. Simplicity is key.

Icon meaning

When you design icons, and you’re not sure about a detail/element, ask yourself this simple question: is this detail/element essential? If the answer is no, then consider removing it. If you’re in doubt, ask someone if he/she understands the concept you’re trying to give form to. However, take in mind that while the purpose of some icons is straightforward these days (almost every user associates the “+” plus sign with the “add/create/new” action), some other symbols need context to be understood. In most cases, icons need a label.

Yep, icons do not replace text.

There are cases where the lack of space pushes designers to use a series of symbols without labels. An example is the navigation bar.

This pattern makes sense for those components that are used quite often by the user. The idea behind this pattern being: the navigation bar is the first thing the user interacts with. He can’t miss it; he knows he needs to use it to navigate the app; therefore he will get used to the meaning of the symbols in a short time.

There are other cases where icons are not used with a label, but with a text component. In such cases, symbols are used to reinforce the meaning of the component. They don’t replace the text.

The takeaway point is that it’s ok if you design an icon and different users attribute different meanings to it. The context where the icons are used will come to rescue. However, if you created a ⭐, and people tell you it looks like a 💖, you may want to review your design.

Style categories

Icons can be grouped in style categories, which refer to the particular way the symbols are created and the common patterns in how they look. The number of styles is extremely high and not fixed. New trends and styles arise all the time.

Creating different styles of the same icon set is expensive, and it depends on the size of your project. In most cases, it’s not necessary. Premium icon families include different styles to be versatile.

The Nucleo icons are designed in 3 different styles:

• Outline/stroke/line
• Glyph/filled/bold
• Colored/flat

If you take a look at different icon families, you’ll notice that sometimes if you select the same symbol in two different styles, the two icons occupy the same exact space. The idea behind this is considering styles as “states”. For example, you can use the outline version of an icon in your design, and then switch to a glyph version in your prototype when the user clicks on the icon (default vs. clicked state). This is not a rule you have to follow. Consider it an optional approach.

A simple change in color is a great approach to create the “active” state of an icon.

When it comes to designing icons for Nucleo, it’s not necessary to have different styles overlap. Our outline icons have customizable stroke values. Therefore they have some limitations when it comes to details that can be included. In the glyph version, you can take advantage of not having customizable stroke values and add more details.

Grid and Optical Volume

The grid you use while designing icons serves two main purposes:

1. It makes it easier to keep the style consistent across different icons
2. It creates constraints that force you to match the optical volume of the icons

99% of the icons you’re going to use are vectors. So you may wonder: why bother using the same grid for all icons when you can just scale them up/down? Because if you pick the same grid, it’s easier to use the same margins, paddings, stroke values, and radius. If, for example, you choose a 24x24 pixels grid, and decide that the main shape of an emoji icon is a 20x20 pixels circle, you can use the same size for all the other emoji as well. Same goes for the size of the eyes of the emoji, the stroke of the element you use to create the smile and so on.

Important → When I refer to grids, I use the pixel unit. This is irrelevant. The grid is the number of rows and columns that define the cells. If you create a 48x48px artboard and decide to use a gridline every 2px, you’re working with a 24x24 “units” grid.

Constraints are your friends. This may sound nonsense, but it’s a concept that can be applied to anything in design. Working with constraints does not mean limiting your creativity, but empowering it. If you work with a 24px grid, for example, and set a 2px padding, you know you’re left with a 20x20px of space to create. You won’t need to deal with optical volume later, and you’ll be forced to keep your icon design essential.

How do you create an icon grid? First of all, choose a size and create a new document in your favorite graphics app. My suggestion would be to choose a small size (something like 24x24px, or 32x32px). It’s easy to get lost with a higher number of cells.

Now you need to create an optical volume template. Matching optical volume means making sure the ratio between the space occupied by the icon and the space available is similar across different icons. To show you an example, take a look at these four symbols.

They’re built on the same grid, however the optical volume ratio (space occupied / space available) is quite different. This affects the user’s perception → the icon with the higher optical volume gets more attention. My suggestion would be to match the optical size, then decide later in design/development to scale up/down a specific icon if you want to enhance it somehow.

To create a basic optical volume template, start with a square. The square is the primitive shape with, potentially, the highest optical volume ratio (if you think about that, a square element can fill the entire artboard). Scale down the square so that you have some padding.

Now consider how tall/wide should be the icons that, because of their nature, stretch vertically/horizontally (e.g., a bottle and a shoe). Draw two rectangles that represent the max vertical and horizontal sizes.

Now draw a circle whose diameter is equal to the max width/height of the two rectangles. This circle will represent the max size of a circle-shaped icon. Your basic optical volume template is good to go!

Optionally, you can add a safe zone (like we did in our example), which is a padding area that should be left empty. I say “should” because it’s not true all the time. The purpose of the safe zone is to take advantage of a few extra pixels in case the icon concept you’re drawing is narrow, so you want to stretch it a little more.

Here’s an example of the same icons we’ve seen before, but updated to have a similar optical volume.

The Nucleo icons are designed on 5 different grids:

• 16px
• 24px
• 32px
• 48px
• 64px

Feel free to download the Nucleo grid template and experiment with it, or use it in your projects.

The icons are not simply scaled up/down at different sizes. They are modified (sometimes entirely re-drawn) to account for the higher/lower amount of pixels. As a general rule, the 16, 24 and 32 pixel icons are the most minimal. The 48 and 64 pixel icons have more details.

One useful tip I’ve learned while dealing with optical volume in Nucleo was rotating narrow icons by 45 degrees. By doing so you have some extra pixels and even though the optical volume ratio doesn’t change much, the visual perception is affected (the icon looks more prominent).

Customization options

Icons have different levels of customization options. The most basic one that comes to mind is changing their color. If you plan to include more advanced customization options, you should test them.

The Nucleo icons support the following customization options:

1. secondary colors
2. stroke editing (limited to outline icons)

These options can be edited in our app* so that our users can make style changes with no need to import the icons in a graphics editor.

*option currently limited to the Nucleo icons

When you create icons for Nucleo, it’s important to test different stroke values to make sure they don’t break the design.

Another test I highly recommend is inverting the colors of icon and background. We generally draw dark-colored icons on light-colored backgrounds. If you invert these colors (e.g., a white icon on a black background), you’ll notice how the thickness of the icon appears to be higher. This is due to how our brain responds to light vs. dark colors. It’s something that used to puzzle Galileo Galilei as well.

This quick test shows you if you have to make some final tweaks to make sure your icon works on any background color.

Icon perspective

One last aspect you may want to go over before creating your icon family is perspective. You can draw 2D or have fun with 3D icons. One of the current trends is creating isometric illustrations. Chances are that, even if you go for two-dimensions, some icons require the illusion of depth. Decide how to handle this depth (create a rule).

Nucleo icons are bi-dimensional. The perspective (as in camera placement) is frontal. That means that in 99% cases there’s no depth. You can bend this rule, and include a “fake third dimension” in the design concept if it makes the icon more meaningful (i.e., easier to recognize).

Here’s an example of an icon that improves by adding depth:

Adobe Illustrator tips

You can use whatever vector editor you prefer to design icons. There are many great options out there like Sketch, Figma, Inkscape, Framer, Affinity Designer and more.

My favorite one is Adobe Illustrator. Here’s a list of useful Illustrator tips related to icon design.

note: replace ⌘ with “ctrl” and “option” with “alt” in the shortcuts listed in the examples below if you’re working on Windows.

Snap to grid

Most of the time, you want to keep the “snap to grid” option turned on. This option automatically aligns the icons to the pixel grid while you create them using primitive objects or the pen tool.

To be fair, nowadays this option is less important than it was in the past. Due to the increase in display resolutions, it’s becoming difficult to see blur effects related to icon alignment. Regardless, enabling this option will make you feel “more in control” while using primitive objects in your design.

Shortcut:

• enable/disable snap-to-grid → shift+⌘+’

If you’re designing icons with 1px stroke, you may want to enable also the “snap to pixel” option. It makes sure the stroke effect is always aligned to the grid.

Now the trick here is being able to turn on and off the snap-to-grid option according to what you’re doing (shortcut to the rescue!). For example, 1) if you want to take advantage of the smart guides or 2) adjust curve handles and move anchor point in complete freedom, then turn off the snap-to-grid option.

This example shows how turning off the snap-to-grid option can be useful sometimes:

Guides & Grid

Set your guides and grid rules in the preferences panel. I generally set a gridline every 10px, with 10 subdivisions, so that each cell is 1x1 pixels. Also, I turn off the “Grids in back” option.

Shortcuts:

• show/hide guides → ⌘+;
• show/hide grid → ⌘+’

Hide & Lock

One of my favorite features in Illustrator: it’s super easy to hide/lock objects, and bring them back or unlock them with no need to look at the layers panel. Here’s how it works: select an object, then use the shortcut ⌘+2 to lock it, or ⌘+3 to hide it. Then press option+⌘+2 to unlock all objects that were locked, or option+⌘+3 to view all objects that were hidden.

This is particularly useful if you want to isolate an object (hide the others), or if you want to edit an object that is behind another one (lock/hide the one on top).

Align to Key Object

Here’s another Illustrator feature I couldn’t find anywhere else: key object alignment. Whats it does is letting you use an object as reference (key) while using the alignment tools.

Here’s a quick comparison between standard alignment and key object alignment:

To align objects to a key element, select all the object, then click on the object you want to use as the key. Then use the alignment tools in the toolbar.

Artboards

Create an artboard for each icon. It’s the best set-up to work with multiple icons without having to create layers*, as well as exporting the icons via the Export for Screens option (Files > Export > Export for Screens…).

*the concept of layer in Illustrator is similar to the concept of group in other apps.

You can set a specific number of artboards in the New Document window, or create them in the Artboards panel (Window > Artboards). You can even use the Artboard tool to modify, drag and rearrange artboards.

Outline View

If you care about being super precise (I’m sure you do 😛), take advantage of the outline view.

Shortcut:

• enable/disable snap-to-grid → shift+Y

Exporting icons

When your set is ready, it’s time to export it! The format of the icons depends on the project you’re working on. If you’re working on an iOS project, you’ll need PNG assets at different resolutions. If you’re working on a web project, chances are you’ll need SVG files.

Luckily for you, there are apps out there that will help you store the icons in a vector format, and deal later with converting them in other formats.

Enter the Nucleo app! Nucleo stores all your icons as SVG files, and exports them in different formats according to your needs.

Here’s how it works: in Illustrator, organize your icons in artboards and export them via the Export for Screens option (Files > Export > Export for Screens…).

Import your icons in Nucleo, and organize them as you wish. Done 🔥

What’s next?

In the next article of the guide, we’ll look at how to create outline icons for Nucleo. So less boring theory and more practical stuff! Thanks for bearing with me so long, and I hope this article taught you something useful about icon design ✌.

Feedbacks/suggestions? Feel free to comment on the article or reach out to us.