Icon Size Reference
Get recommended icon sizes for different contexts: UI, mobile, favicons, and app icons.
Result
Recommended Sizes12px (micro), 16px (small), 20px (default), 24px (medium), 32px (large), 48px (hero)
Touch TargetMinimum 44x44px touch target (WCAG 2.5.8)
TipUse 20-24px for most UI icons. Maintain consistent stroke width.
Code / CSS
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;About This Tool
Icon Size Reference helps designers and developers choose optimal icon dimensions for different UI contexts. Used by web designers, mobile app developers, and design system teams to maintain consistency across products.
Input your base icon size, and the tool generates a complete spacing scale with recommended dimensions for favicons, touch targets, app icons, and SVG exports. Outputs include pixel values, rem units, and responsive breakpoints.
Perfect for creating icon libraries, documenting design systems, and ensuring accessibility standards. Runs entirely in your browser—no data collected, no account needed, completely private.