PDFSVG

SVG icon workflow

SVG icon size guide

SVG icons can scale, but the size you design and export still matters. Use this guide to choose a practical viewBox, display size, and PNG export size.

For most interface icons, start with a square SVG viewBox such as 0 0 24 24. Use CSS to display the icon at 16, 20, 24, or 32 pixels. Export PNG at 2x or 3x only when the final use cannot render SVG directly.

Common SVG icon sizes

Use case Display size Good SVG viewBox PNG export
Small toolbar icon 16 or 20 px 0 0 20 20 or 0 0 24 24 32 or 40 px for 2x PNG
Default UI icon 24 px 0 0 24 24 48 or 72 px
Large button icon 32 or 48 px 0 0 32 32 or 0 0 48 48 64, 96, or 144 px
App icon or logo mark Variable Square viewBox with enough padding Export exact platform sizes

ViewBox matters more than width and height

The SVG viewBox defines the internal coordinate system. Width and height define the display size. A clean 0 0 24 24 viewBox makes an icon easy to use in React, CSS, buttons, and design systems because the same artwork can display at different pixel sizes.

Why PNG icon exports look blurry

A PNG has fixed pixels. If a 24 px PNG is displayed at 48 px, the browser has to stretch it. Export at 2x or 3x when you need PNG, or keep the SVG file when the app can render vector artwork directly.

React icon sizing checklist

  1. Keep the SVG viewBox stable, usually square.
  2. Let the React component accept width, height, size, or className.
  3. Use currentColor when the icon should follow text color.
  4. Do not bake a random pixel width into reusable icons unless the design system requires it.
  5. Check the icon at the smallest size where people will see it.
Export SVG to PNG SVG to PNG for icons React icon component checklist

Common questions

What size should an SVG icon be?

Most UI icons work well with a 24 by 24 viewBox and a display size of 16, 20, 24, or 32 pixels. Larger brand marks and app icons can use a larger square viewBox.

Does SVG size matter if SVG is scalable?

Yes. SVG can scale, but a consistent viewBox and sensible drawing proportions make the icon easier to align, export, and reuse in React or CSS.

What PNG size should I export from an SVG icon?

Export PNG at the final display size multiplied by the screen scale. A 24 px icon usually needs a 48 px PNG for 2x screens or a 72 px PNG for 3x screens.

Should React SVG icons have fixed width and height?

Reusable React icons usually work better when size can be controlled through props or CSS. Keep the viewBox fixed and let the component decide the display size.