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.
Look at the MacOS toolbar circa 2009 versus today. The old icons were stuffed to the gills with gradients and highlights. The new ones (SF Symbols) are stark. The secret to a legible small icon is . 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
Here is the blueprint. The first thing you hit is physics. Most modern UI icons live happily at 24x24 pixels. At this size, you have room for a stroke, a counter (the hole in an 'O' or a folder), and a subtle drop shadow. But when you cross the Rubicon down to 16x16—the sacred size of browser tabs, window controls, and dense data tables—you enter a zone of cruelty. Look at the MacOS toolbar circa 2009 versus today
An icon is defined by the empty space around it. If you take a 32px icon and scale it down to 16px but leave it on a 44x44 touch target, it looks tiny and lost. Conversely, if you shrink the icon and shrink the touch target to 24x24, it looks crisp and dense.
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.