How to Create an Icon System for Your Design System

Look, I've been working with design systems for a while now, and I think creating an icon system is one of those things that seems simple until you actually start doing it. Then it hits you—this is actually pretty complex. But here's the thing: once you get it right, everything else in your design system just falls into place.

Why You Actually Need This

Before we dive into the how, let me just say that a lot of teams skip this step and regret it later. They'll just grab icons from different sources, maybe use a mix of Heroicons here and Material icons there, and call it a day. Don't do this. Your icon system isn't just about having pretty little graphics—it's about creating a unified visual language that makes your product feel cohesive.

Plus, icons are language-independent, which is huge if you're working on products that need to scale globally. They don't take up much real estate either, which makes them perfect for those cramped mobile interfaces we're all designing for these days.

Start With Principles (Yeah, Really)

I know, I know. Starting with principles sounds boring and corporate. But trust me on this one—you need a checklist of principles before you start drawing anything.

Think about what your brand actually represents. Is it playful or serious? Minimal or detailed? These aren't just abstract questions. Your answers here will determine whether you're using rounded corners or sharp edges, thick strokes or thin ones, filled icons or outlined ones.

Here's what you should probably figure out:

• Stroke vs. fill: Are you going lined or filled? Material Design uses line style for default states and filled for selected states, which makes sense from a focus perspective adobe
• Corner radius: How much rounding feels right for your brand? adobe
• Stroke weight: This affects everything about how your icons feel adobe
• Color approach: Single color or duo-tone? (Spoiler: keep it simple) designsystems
• Metaphors and style: Literal or abstract? Geometric or organic? designsystems

Adobe's Spectrum team actually had working sessions with advisors to nail down these principles before they even started designing. Seems like overkill, but when you're building icons for a portfolio as massive as Adobe's, you can't wing it.

The Grid System Thing

Okay, so grids. Everyone talks about the 8-point grid system, and for good reason. If your design system uses an 8px grid (and it probably should), your icons need to work within that same system.

The Pixel Grid

First up: the pixel grid. This is your foundation. Every straight line in your icons should align to actual pixels, not sit between them. Why? Because when something's off-pixel, it looks blurry and weird. Your browser has to do this thing called anti-aliasing to compensate, and it never looks quite right.

In Figma, you can easily see when something's on-pixel versus off. Just zoom in enough and you'll notice. Once you start paying attention to this, you can't unsee it.

Icon Sizes That Actually Work

If you're using an 8px grid, build your icons at 16px, 24px, or 32px. These are the sweet spots. Most teams pick 24×24px as their base size because it's big enough to add detail but small enough to use in compact UIs.

Don't make the mistake of creating the same icon at every possible size. That's a nightmare to maintain. Build at your base size, then let your developers scale as needed. The exception? When you need different levels of detail for dramatically different sizes—like a 24px product icon versus an 80px marketing icon.

The Optical Grid (This One's Tricky)

Here's where it gets interesting. The optical grid is about how humans actually perceive shapes. Circles and curved objects look smaller than squares, even when they're technically the same size. Wild, right? designsystems

So you need padding around your icons—usually equal to your stroke weight, or maybe double if you're using a 1px stroke. Different shapes hit different edges of your optical grid. A circle might extend further than a square to look the same size.

And yeah, if you have asymmetric icons, you might need to adjust their positioning to achieve optical alignment. It's not about mathematical centering—it's about what looks centered to the human eye.

[image: Example showing optical grid with different icon shapes aligned - circles, squares, and triangles positioned at different boundaries to appear optically balanced]

Stroke Weight and Style Decisions

Stroked vs. Filled Icons

This is probably the biggest style decision you'll make. Stroked icons give you the ability to add tiny details and generally feel lighter. Filled icons have higher recognizability and work better at smaller sizes.

My take? Pick one style for your base set. You can create variants later for things like selected states, but don't try to maintain both from the start. It's too much work and you'll end up with inconsistencies.

If you go with stroked icons, don't make them smaller than 10px with a 1-2px stroke weight. They'll be impossible to read. Just trust me on that one.

Consistency Is Everything

Nothing drives me crazier than seeing two icons side by side where one is filled and the other is stroked. Or icons where the stroke weight varies randomly. Your icons need to feel like they belong to the same family.

Use the same stroke weight throughout. If you're using 2px strokes, stick with that. Everywhere. The only exception is when you need minor optical adjustments to maintain visual balance —but those should be tiny tweaks, not major changes. denali

Same goes for corner radius. Pick a value and use it consistently. When you're creating concentric shapes, you'll need to adjust the inner corner radius to maintain the visual effect. But that's intentional adjustment, not random variation.

Drawing Your Icons

Start With Geometry

Unless you're going for a really organic, hand-drawn vibe, start with basic geometric shapes. Rectangles, squares, and circles give you a solid foundation. When you base icons on the same few shapes, they naturally look like they belong together.

Use the same angles throughout too—90°, 45°, 30°. This makes icons more legible and more consistent. If you're going to tilt your icons (which can make them stand out), tilt them all at the same angle.

Figma's got this excellent corner radius tool that makes drawing natural forms pretty easy. You can draw all your points as straight lines, then round the corners afterwards. The tool automatically adjusts when you move points around, which saves tons of time.

Corners and Caps

You've got options for corners: mitered (square), beveled, or rounded. Pick one and stick with it across your entire icon set.

Same with end caps—rounded or squared. The decision affects the overall feel of your icons, so think about your brand personality here.

Reuse Shapes Whenever Possible

Don't reinvent the wheel every time. If you've already drawn a good arrow or plus sign, reuse it. This isn't about being lazy—it's about maintaining consistency. When similar elements show up across different icons, they should actually be the same element.

Metaphors and Recognition

Here's something that's kind of fascinating: we all understand certain icon metaphors without thinking about them. A house means homepage. A trash can means delete. A magnifying glass means search.

These are universal icons, and you should use them. Don't try to reinvent the home icon just to be different. Users already know what these symbols mean, and that reduces cognitive load.

But for more complex actions or concepts, you'll need to develop your own metaphors. Think about what visual representation makes sense and will be clear to users. Test them. What's obvious to you might be confusing to someone else.

Naming and Organization

This is where a lot of teams mess up. If you have thousands of icons without a logical naming system, nobody will be able to find anything.

File Naming That Makes Sense

Name your icons based on what they show, not what they represent. A stopwatch icon should be named "stopwatch," not "speed." A lightbulb should be "lightbulb," not "idea." This makes searching way more intuitive.

Keep names short. When you need multiple words, use dashes to separate them. So like "arrow-left" or "file-document." uxpin

Adobe's Spectrum uses a system based on shared terms, the tool the icon represents, and a secondary action. So you might have "VectorDrawAdd"—makes sense once you understand the pattern.

Tagging for Search

Here's the thing though: people search for icons in different ways. Some search by description, others by function or category. Some search based on what the icon looks like, even if they're wrong about the name.

So use tags. Lots of them. Work with your content strategists or UX writers to develop a tagging system. Adobe created about 3,000 tags so that searching for "draw," "pen," "vector," or "write" would all pull up the same pen icon.

Component Organization

In Figma, turn your icons into components. When you need to use one, create an instance from your library. If someone updates the main component, all instances update automatically. This is huge for maintenance.

Use pages to organize by size, and frames to organize by category. So your structure might be: size > category > file name. This makes navigation way easier when you're dealing with hundreds of icons.

For variants, here's what seems to work:

• Different sizes: Use separate pages
• Filled vs. stroked: Use a slash in the name, like "home/filled"
• Visual variants: Same approach, like "currency/dollar" and "currency/euro"

Technical Implementation

SVG Is Your Friend

Export as SVG. Just do it. SVG is scalable, lightweight, and you can control it with CSS. Plus, Figma exports really clean SVG code, so you don't need to optimize it further. blog.nucleoapp

There are a few ways to implement SVGs:

Inline SVG: Literally paste the SVG code into your HTML. Easiest method, and you can style it with CSS. The downside? Your HTML gets bloated if you're using lots of icons.

Icon components: If you're using React or Vue, create icon components. Import your SVG and wrap it in a component. Now you can reuse it anywhere with consistent props.

SVG sprites: One file containing all your icons, each with a unique ID that you reference in your code. Efficient, but slightly more setup.

Different teams have different needs and frameworks. Offer multiple implementation methods so everyone can use what works best for their stack.

Color Variables

Use CSS color variables instead of hardcoding colors in your SVGs. This makes theming way easier. Your icons can automatically adapt to light mode, dark mode, or any other theme without touching the SVG files.

Adobe's Spectrum uses single SVGs with CSS color variables. It's minimal, efficient, and works across platforms.

Handling States and Variants

Icons often need different states. Default, hover, active, disabled. The common pattern is using outlined icons for default states and filled versions for active or selected states.

The trick is setting this up so it's easy to swap between states. In Figma, you can use variants for this. But you need to plan your naming and organization carefully so that swapping from "home" to "home-filled" actually works.

Some teams create completely separate icon sets for filled and outlined versions. That's fine, just make sure your naming is consistent so developers can programmatically swap between them.

Accessibility Considerations

Okay, this is important and a lot of people skip it. Your icons need to be accessible.

Size and Touch Targets

Make sure icons are large enough to be recognizable—minimum 16×16px for small icons, 24×24px for larger ones. But here's the critical part: the touch target should be at least 48×48px. That's the area users can actually tap or click.

So your icon might be 24px, but it needs 12px of padding around it to hit that 48px touch target. Plan for this in your components.

Contrast and Visibility

Icons need significant contrast between foreground and background. Aim for at least 3:1 contrast ratio. This is especially important for users with low vision.

If you're using color to convey meaning (like a red error icon), don't rely on color alone. Pair it with text or another visual indicator.

Labels and Alt Text

Icons should have labels. Yeah, even "obvious" ones. Not everyone interprets icons the same way. Labels can be visible or hidden (for screen readers), but they should be there.

For icon buttons, provide proper alt text and ARIA labels. Screen reader users need to know what the icon does.

Keyboard Navigation

All icon buttons need to be keyboard accessible. Users should be able to tab to them and activate them with Enter or Space. This isn't optional.

Beta Testing and Iteration

Don't just design your icon system in a vacuum and then release it. Adobe's Spectrum team did extensive beta testing with product designers while they were still in the exploration phase.

Create a basic library of your icons and get them into the hands of the teams who'll actually use them. Have them use the icons in real mockups. You'll discover edge cases and issues you never thought about.

Turns out, seeing icons in actual interface contexts reveals all kinds of problems that look fine when icons are sitting on their own. An icon that looks great isolated might be totally wrong when it's next to a specific typeface or in a particular UI component.

Wrapping This Up

Creating an icon system isn't a weekend project. It takes time to get right. But when you do it properly—with clear principles, consistent execution, good documentation, and proper governance—it becomes one of the most valuable parts of your design system.

Now go make some icons. You've got this.