Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Icons in Design System

Icons are integral part of a design system. Most modern applications and websites utilize icons to indicate frequently use functions and universally-recognized shortcuts.

In this lesson, we will take a look at how to properly define icons in a design system.

Basic elements of an icon

Size

Consistency is key with icons, and all your icons should be the same size when you build them. First, you’ll need to make sure that you know how your grid is built (multiple of 8 or 10?). From there, your base icon size should relate directly to that. So, if you have a grid based on 8s, you’d want to build at 16, 24, or 32.

Choose a common size to build all your icons to, and then allow your engineers to scale to other sizes that might be needed by other designers. You don’t want to build the same icon over and over at a multitude of sizes.

When you need glyph complexity, that’s when you want to start adding sizes. You might have your base product icon at 24px, but marketing icons at 80px because of the vast difference in use. You’ll want to add detail for those larger sizes.

When building the same icon at different sizes, it’s a good idea to start with the largest size and go down. It’s much easier to remove details and simplify, rather than adding as you go up. It also gives you a sense of the object before you truly minimize it.

Color

For product icons, use 1 color: black. Anything more than that and your components are going to become too complex and difficult for other designers to leverage. For marketing icons, you might want to use 2 colors if it is a crucial part of your brand. Anything with 3 or more colors is an illustration, not an icon.

https://images.ctfassets.net/7jw9uvgmirvi/6ETnUgi2ms9GuoDpUtmU2D/18bc7529fe909b4fe8e673b42906e7fd/3-Drinks.png

Grids

Pixel Grid

The pixel grid is the fundamental grid that uses the smallest increment: a pixel. When building icons, you always want to align objects to the pixel grid, especially straight lines. But, you can build other shapes on the pixel grid.

You want to build things on the pixel grid, not just because it will render more nicely, but because it makes your life easier. Spacing things evenly is much easier when you’re using a grid. It helps you stay consistent with your placement, and overall will make your icons look better.

https://images.ctfassets.net/7jw9uvgmirvi/4FJojSCuwlE2Pdl3Kg6cmh/1fa7c0b270bd9ab15d3f4e7b9cf74d72/Group__10_.png

Optical Grid

Great! Now that you’ve mastered the pixel grid you’ll want to learn about the optical grid.

The optical grid helps us figure out where the center of mass of the icon is, as well as how large it is perceived by the human eye. Circles and curved objects take up less visual space than squares. It is best to put your icons in a fixed size container so that they’re all identical dimensions when exported. Adding this intrinsic padding supports the optical/perceptive weighting without additional fussing in dev later down the line.

In building optical grids, it’s good practice to give padding at the edge that’s equal to the stroke weight, or possibly double if you are using a 1px stroke. You can see in these examples how the different shapes go to the different edges of the grid.

Visually, the dominant object should be centered both vertically and horizontally.

If you’re using the pixel grid and taking advantage of the optical grid, you’re going to be streets ahead.

Strokes and fills

Making sure your icons are all styled the same way is very important. You might have use cases for applying a fill to show something is selected, for instance, but you definitely want to create a set with one style, and possibly create the other variant.

Typically, filled icons have higher recognizability. Stroked icons give you great ability to create tiny details. When choosing which style is more appropriate, you should also consider your overall brand.

If you’re going to create stroked icons, strokes all need to be the same weight. It is also recommended that the space between strokes not be thinner than your stroke weight.

https://images.ctfassets.net/7jw9uvgmirvi/3957h6OhfvOzbmUcKybKN1/cb367b073711b2654fe5fb63310797b4/10-Trash.png

Maybe you have an icon set that fulfills one style, but not the other. When creating filled versions of stroked icons, you’re going to want to look at how you can simplify the line work. Ideally, filled icons are like shadows, rather than inverted line-based icons. Creating stroked versions of filled icons involves determining what stroke weight you can fit in your space and what details you might add while maintaining clarity.

https://images.ctfassets.net/7jw9uvgmirvi/X0X9bZhSOlVhC09qo9Bgp/84fb5d83a85fab7630164c283329d470/11-Icons-Style-Options.png

We do not recommend making stroked icons at smaller than 10px (assuming 1px-2px stroke weight). They will be very hard to decipher.

Style choices

Your icons are a reflection of your brand. When starting this work, it is important to understand the core values of your brand and how they manifest visually. Some adjectives to think about are hard/soft, casual/formal, luxurious/economical, and literal/abstract. You may have an illustration style you can reference.

Some icons seem like no-brainers (an X, a hamburger menu, a chevron), but these icons require you to have already figured out the basic tenets of your icon system. We recommend starting with harder icons (ie. more complex) to help you determine what rules you want to instill. This way, once you start designing simpler icons, it will be easy breezy.

https://images.ctfassets.net/7jw9uvgmirvi/74ZdOcDV1wFVseCn3dCkVI/fe476fe00f0f51731f455a58dade72d4/12-Icons-Style-Options-Stroked.png

How to use icons in a design system

Making your icon set accessible to the rest of your team is a matter of organization, asset management, and awareness.

Organization

Let’s start with file naming. Your icons should be named based on what they show, not what they represent. For instance, a stopwatch icon should be named stopwatch, not speed. A lightbulb should be called lightbulb, not idea.

You want to make instantly clear to people what the icon is, not what it communicates on a more conceptual level. Shorter names are better, too. When you need multiple words, use a dash to separate them.

Managing your assets

Once you’re done with your icons, you want them to be as clean as possible for the best possible export. Avoid any extra lines or shapes. Check that all your lines fall inside your frame. It is absolutely worth having another person look at all your icons and double check for tidiness.

Getting your icons into the hands of others

You can be the world’s greatest icon designer, but if you can’t get your icons implemented in your app/webpage/direct mailer, it won’t do any good. Before you start designing, talk to the engineering team responsible for getting these into product. They will be able to give you information about the website or app infrastructure which will drive some of your choices, like stroke weight or size. Ask other designers what has been done in the past to make sure you’re not duplicating work. Be the friendly coworker who asks people for feedback, advice, and help. It will give you a better idea of what you should be making, so you aren’t redoing work, or ignoring key tenants other people already figured out.

Scroll to Top