Have you ever used a web application where the "Settings" gear icon looks sharp and heavy, but the "User Profile" icon next to it looks thin, rounded, and delicate?
This is a classic sign of Frankenstein Iconography—the result of a developer grabbing whatever free SVG they could find on Google Images and throwing it into the UI.
In professional UI/UX design, icons are not just pictures; they are a typography system. Just as you wouldn't mix Times New Roman and Comic Sans in the same paragraph, you shouldn't mix mismatched icons in the same navigation bar.
Here is a step-by-step guide to creating a perfectly consistent iconography system for your web app.
Rule 1: Stick to a Single Base Library
The easiest way to ensure consistency is to pick one massive, well-maintained icon library and never leave it.
Libraries like Material Design (7,400+ icons) or Phosphor (9,000+ icons) have enough volume that you will almost never need to look elsewhere. The designers of these libraries have already spent thousands of hours ensuring every icon adheres to strict grid rules.
If you absolutely cannot find a specific icon in your chosen library, you must custom-design the missing icon to match the library's rules.
Rule 2: Unify the Grid Size
Every professional icon is designed on a specific canvas, known as the base grid.
- Material Design uses a 24x24 grid.
- IBM Carbon uses a 32x32 grid.
- Heroicons uses a 24x24 grid for outlines, and a 20x20 grid for solid mini-icons.
If you scale a 32x32 Carbon icon down to 24x24 to match a Material icon, the lines might not align to the pixel grid anymore, causing sub-pixel rendering (blurriness). Always try to use icons that were natively designed for the size you are rendering them at.
Rule 3: Match the Visual Weight (Stroke vs. Fill)
This is the most common mistake in amateur design.
There are two primary ways to draw an icon:
- Stroke-based: The icon is drawn with lines. (e.g., Lucide)
- Fill-based: The icon is drawn with solid shapes. (e.g., Font Awesome Solid)
You must pick one style and stick to it across your entire application. The only exception is using Fill-based icons to represent "Active" states in a navigation menu, while using Stroke-based icons for "Inactive" states (a common pattern in iOS design).
If you choose a stroke-based library, ensure the stroke width is identical across all icons. A 1.5px stroke next to a 2.5px stroke will look completely unbalanced.
Rule 4: Corner Radius and Terminals
Look closely at the edges and corners of your icons.
- Are the corners perfectly sharp (90 degrees)?
- Are they slightly rounded (e.g., a 2px border radius)?
- Are the ends of the lines (terminals) flat or rounded?
Lucide icons use rounded corners and rounded terminals, giving them a friendly, modern look. Carbon icons use sharp corners and flat terminals, giving them a strict, brutalist look. Mixing these two sets will instantly look wrong to the human eye, even if the user can't consciously articulate why.
Rule 5: Optical Balancing
Sometimes, mathematical consistency isn't enough. A square icon that is exactly 24x24 pixels will visually appear much larger than a circular icon that is 24x24 pixels.
To fix this, icon designers use optical balancing. The square might be drawn at 20x20 pixels within the 24x24 canvas, while the circle stretches to 22x22 pixels.
If you are using the FluxToolkit Icon Library, we provide a built-in Padding control. If you have an icon that looks optically too large compared to its neighbors, you can use the customizer to increase its internal padding, shrinking the icon relative to its container before you copy the SVG code.
How to Audit Your Current Application
Want to know if your app suffers from Frankenstein Iconography? Do this quick audit:
- Take a screenshot of your main navigation sidebar.
- Desaturate the image (turn it black and white) to remove color bias.
- Squint your eyes. Do some icons look significantly darker or heavier than others? That means your visual weight is inconsistent.
- Zoom in to 400%. Do some icons have sharp corners while others are rounded?
The Ultimate Shortcut for Developers
If you aren't a designer and don't want to spend hours analyzing stroke weights and pixel grids, the solution is simple:
Go to the
By enforcing this simple rule, your application's UI will instantly feel twice as professional and cohesive.
Frequently Asked Questions
Can I mix two different open-source icon libraries?
Generally, no. Unless you have a highly trained designer's eye and can manually verify that both libraries share the exact same base grid, stroke width, and corner radius, mixing libraries will result in a disjointed user interface.
Should I use solid icons or outlined icons?
Outlined (stroke) icons feel lighter, more modern, and less intrusive, making them great for complex dashboards with lots of data. Solid (fill) icons have higher visual impact and are better for mobile bottom navigation bars or primary call-to-action buttons.
Why do some of my SVG icons look blurry?
This usually happens because of sub-pixel rendering. If an icon was designed on a 24x24 pixel grid, and you render it in CSS at width: 25px, the browser has to mathematically stretch the lines, pushing them off the physical pixels of your monitor. Always try to render icons at multiples of their native grid size (e.g., 24px, 48px).
