How to Use the Icon Size Generator (And Why It Matters for UI Design)

Creating a consistent icon system is critical for clean, scalable design. The Icon Size Generator helps you generate pixel-perfect icon dimensions across multiple scales from a single base size. Whether you’re building a design system or exporting icon sizes for developers, this tool saves time and ensures precision.

🛠️ What Is the Icon Size Generator?

The Icon Size Generator is a free online tool that:

• Takes one base icon size (e.g. 24px)
• Multiplies it across standard scales (0.5x, 0.75x, 1x, 1.5x, 2x, 3x, 4x)
• Shows a visual preview of each size
• Lets you export sizes as JSON, SCSS variables, or CSS custom properties

✅ Why Use an Icon Size Generator?

Manually calculating icon sizes is tedious and error-prone. This tool helps by:

• 🔄 Keeping your icons proportional and scalable
• 🧑‍💻 Helping developers implement exact dimensions across responsive breakpoints
• 🎨 Ensuring design-to-code consistency for your style guide
• 🚀 Saving time by generating multiple sizes in one click

🔧 How to Use the Icon Size Generator

1. Enter a Base Icon Size

• Type a pixel value like 16, 24, or 32
• This is the starting point for generating scaled icons

2. Choose Output Format

Pick the format that fits your workflow:

• JSON – for design tokens or handoff
• SCSS – to use in Sass/SCSS files
• CSS Variables – for use in global stylesheets or design systems

3. Preview the Icons

The tool generates a grid of icons showing each scale multiplier:

• You’ll see boxes labeled 0.5x, 1x, 2x, etc.
• These help you visually assess size differences before export

4. Copy the Output

Click the 📋 Copy Output button to save the result to your clipboard:

• Example (SCSS):scssCopyEdit$icon-1x: 24px; $icon-2x: 48px; $icon-4x: 96px;

🧪 Example Use Case

You’re designing a UI with 24px base icons. Using this tool, you get:

• 12px for 0.5x
• 18px for 0.75x
• 36px for 1.5x
• 48px for 2x
• 96px for 4x

Now, you can apply these sizes consistently across components, breakpoints, or theme tokens.

🧠 Pro Tips

• Match your base icon size with your grid system (e.g. 8pt or 4pt)
• Use Tailwind’s theme.extend to map custom icon sizes using the output
• Include these in Figma or Sketch as tokens for faster prototyping

Spacing Scale Generator

PX to REM Converter