How To Make Icons Smaller [exclusive] May 2026

Not thumbnails. Not the app grid on your phone. I’m talking about the workhorses—the toolbar glyphs, the status indicators, the inline action buttons that populate enterprise software, creative suites, and dashboards.

At 16 pixels, you have exactly 256 squares of light. Remove the stroke? The shape bleeds. Keep the stroke? It closes the counters. This is where most designers give up and rely on raster PNGs that look like ink blots. how to make icons smaller

The modern "compact" mode (seen in Notion’s sidebar or Visual Studio Code’s "Zen" mode) works because the icon shrinks in proportion to the row height. The ratio of icon size to background remains 1:3. How do you know if you succeeded? Two tests. Not thumbnails

When shrinking a complex icon (say, "cloud upload with a progress arrow"), you have to murder your darlings. You keep the cloud. You keep the upward arrow. You sacrifice the outline of the cloud’s internal fluff. You merge the arrow into the cloud’s base. The result is a hybrid monster that looks wrong in isolation but reads perfectly in context. Beginners try to fill the 16x16 canvas. Experts leave it empty. At 16 pixels, you have exactly 256 squares of light

We live in an age of maximalist screens. 4K, 5K, and 8K panels pack millions of pixels into spaces once dominated by chunky CRT displays. Toolbars are getting taller, padding is getting thicker, and design systems are preaching the gospel of "breathing room." So, it might sound counterintuitive, even heretical, to ask: How do we make icons smaller?

This is at work. The human brain is a completion machine. It doesn't need the handle to know it’s a mug. It doesn't need the individual keys to know it’s a keyboard.