Icons are the unsung heroes of user interface design. Nobody writes home about them, nobody pins them to their inspiration boards, but try using an app without them and you'll immediately feel lost. Icons communicate function at a glance—they're visual shortcuts that reduce cognitive load and make interfaces scannable. Get them right and users don't even notice them. Get them wrong and you've got a confused, frustrated audience wondering what on earth that weird symbol is supposed to mean.
I've been designing icon sets for about eight years now, and I've learned that there's a massive difference between "I can draw icons" and "I understand how to design a coherent icon set that works in a real interface." The first is a technical skill you can learn in an afternoon. The second is a craft that takes serious practice to develop. Let me share what I've learned along the way.
Visual Consistency in Icon Sets
Consistency is everything in icon design. If you mix rounded corners with sharp corners, thin strokes with thick strokes, filled shapes with outlined shapes, your icon set will feel like it was made by a committee with no communication—which, embarrassing to admit, does happen when teams work in silos.
The most important consistency decisions happen at the start of a project. What style will your icons use? Outlined or filled? What stroke weight? What corner radius—sharp, rounded, or mixed? Are icons solid shapes or constructed from lines? These decisions need to be made for the entire set upfront, not per-icon as you go. I've seen designers create a gorgeous home icon, then a search icon that looks like it came from a different project entirely, and by the time they've created fifteen icons the set has lost all coherence.
One trick I use: create a reference sheet early in the project with all the style decisions documented. Stroke width, corner radius, optical sizing adjustments, any special cases. This becomes the rulebook you follow for every icon. When you encounter an ambiguous situation—like "should this complex icon use the same stroke weight as the simple ones?"—you consult the reference and make a consistent decision.
Optical Sizing and Clarity
Here's something they don't teach you in design school: icons don't scale linearly. A 24px icon isn't just a 48px icon shrunk down. The same stroke weight that looks elegant at large sizes becomes mud at small sizes. Details that read clearly at 48px disappear at 16px. This is why professional icon sets often include optical adjustments—slightly thicker strokes at small sizes, simplified details, adjusted proportions.
The key principle is that icon complexity should decrease as size decreases. At 24px and above, you can include moderate detail. At 16px, simplify. At 12px—which is tiny and you should generally avoid it if possible—you need almost no detail at all. A magnifying glass at 24px might show the glass shape, the handle, and even some internal detail. At 16px, it's just the glass and handle. At 12px, it's barely more than a circle with a line coming off it.
Test your icons at actual use sizes, not just in the mockup where they're displayed at 64px looking beautiful. Put them in a real toolbar, in a real navigation menu, in a real form. See how they look next to text. See how they look in dark mode versus light mode. The real-world context will reveal problems you never would have caught staring at your design file.
Stroke Weight Considerations
Stroke weight is one of the most impactful decisions in icon design, and one of the most commonly done wrong. Too thick and icons feel heavy, cartoonish, unprofessional. Too thin and they feel fragile, disappear at small sizes, and look unpaid-intern-created. The "right" weight depends on your icon style and use case, but there are some guidelines that help.
For outlined icons, 1.5px to 2px tends to work well at common UI sizes (16px-24px). Some designers push to 2.5px for a bolder look, especially in mobile apps where touch targets are large. Below 1.5px and you're entering "too delicate to read" territory for anything below 32px. Remember: you can always use multiple weights in one set intentionally (lighter for secondary actions, heavier for primary), but mixing weights accidentally looks sloppy.
For filled icons, the "weight" comes from the filled area versus negative space. Dense filled icons (like Font Awesome's solid style) feel heavy and bold. Lightly filled icons (like Feather's approach) feel more refined but can read as lighter in visual hierarchy. Neither is wrong—they're different tools for different jobs. Filled icons generally work better at small sizes where thin strokes would disappear. Outlined icons work better for interactive states (like hover, where an outlined icon might fill on hover).
Grid-Based Icon Design
Professional icon sets are built on grids. The most common are 24x24 (for system UI icons), 20x20, and 16x16. Some designers use 32x32 for more detailed illustration-style icons. The grid gives you a structure to align to, ensures optical balance, and makes handoff to developers cleaner because everything snaps to predictable coordinates.
Within the grid, you typically have a safe area—a zone in the center where the main icon elements live—and edge margins that prevent the icon from feeling cramped against whatever container it's in. Most icon grids use 2px margins, so your actual drawing area within a 24x24 grid is 20x20. This margin prevents your icons from visually shrinking next to icons from other sets that respect the same conventions.
But—and this is important—the grid is a guide, not a prison. Some of the best icons deliberately break the grid slightly to achieve optical balance. A circle that fills the entire 24x24 space might look visually smaller than a square that also fills 24x24 because circles naturally feel smaller due to their lack of corners. To compensate, you might make the circle slightly larger optically. This is why "optical" adjustments exist: mathematical precision doesn't always equal visual balance.
Hand-Drawn vs. Geometric Styles
There are two broad approaches to icon design, and they create very different feels. Geometric icons are precise, calculated, symmetrical. They're made with circles, squares, triangles, clean curves. They feel systematic, professional, almost corporate. Think the icons in Google's Material Design or Apple's SF Symbols. They're designed to be clear and unambiguous at small sizes.
Hand-drawn or organic icons embrace imperfection. Lines vary slightly in thickness. Corners aren't perfectly sharp. Curves feel more human and less machine-made. They have personality and warmth, which can be perfect for brands that want to feel approachable and friendly. But they can also feel amateur if not executed well, and they generally require more skill to make look intentional rather than just sloppy.
My honest recommendation: unless you have a specific reason to go hand-drawn, stick with geometric. It's easier to maintain consistency, easier to explain to developers, and harder to mess up. The brands that pull off hand-drawn icons successfully usually have designers who are very skilled at maintaining that style consistently across hundreds of icons. That's harder than it looks.
Exporting Icons for Developers
Here's where great icon design can fall apart: the handoff to developers. Even if you've created perfect icons, if you export them wrong, they'll look wrong in the final product. This part isn't glamorous but it's critical.
The formats you need to know: SVG is the web standard and increasingly common in apps too. Export as SVG with paths (not compound paths that some tools create), and make sure the viewBox matches your grid size. PNG at multiple sizes (16, 24, 32, 48, 64) for older app support or when you need pixel-perfect rendering at specific sizes. PDF works for iOS development. For Android, vector drawables. Each platform has its preferred format, and your developer should be able to tell you what they need.
Whatever you do, don't export icons at 24x24 and tell developers to resize them in code. Icons need to be exported at each size they're used at. A 24px icon scaled up to 48px will look blurry because it's being stretched. If you need 48px icons, export actual 48px files. Yes, it's more work. No, there's no shortcut. This is just how it works.
Also, name your files consistently. Don't send over "home icon final v3 use this one.png" and "icon_home.png" and "home_icon_NEW.png" in the same folder. Use a naming convention like "ic_home_24px.png" or "icon-home.svg". Your developer will thank you, and future-you won't spend hours trying to figure out which file is actually the latest version.
Tools to Help You
If you're looking for existing icons to use as reference or inspiration, our Icon Search tool can help you find the right style for your project. And if you're designing icons and need to check contrast for accessibility, our Color Contrast Checker ensures your icons meet WCAG standards. Good design is accessible design, and that includes your icons.
Icon design is one of those skills that separates junior designers from senior ones. Anyone can draw a pretty symbol. Creating a cohesive, usable, scalable icon set that works across dozens of sizes and contexts—that's the craft. Take it seriously, be systematic about your process, and your interfaces will benefit enormously.