Icon workflow
How to Export SVG Icons at 2x, 3x, and 4x
SVG is an ideal source format for icons because it can scale without losing sharpness. But many app platforms, CMS tools, and asset pipelines still ask for PNG files at fixed pixel sizes. Exporting at 2x, 3x, and 4x helps you create crisp raster icons for high-density screens.
What 1x, 2x, 3x, and 4x mean
The scale number is a multiplier applied to the source size. If your SVG icon is designed on a 24 by 24 canvas, a 2x export creates a 48 by 48 PNG. A 3x export creates 72 by 72, and a 4x export creates 96 by 96. The visual design is the same, but the image contains more pixels.
Start with a consistent icon grid
Before exporting, make sure your icons share the same viewBox and padding rules. A set of 24 by 24 SVG icons should all use the same coordinate system unless there is a deliberate reason not to. Consistency keeps the exported PNGs aligned in navigation bars, buttons, menus, and app screens.
Decide which scales you actually need
More exports mean more files to manage. For web projects, SVG itself is often best, and PNG fallbacks may only need 1x or 2x. For mobile app assets, multiple scales are more common. Match your export set to the platform requirements instead of generating every possible size by habit.
Use transparent PNG for UI icons
Most icons should be exported with a transparent background so they can appear on buttons, panels, and colored surfaces. If an icon has a fixed badge or tile background, include that shape in the SVG intentionally rather than relying on an export background.
Name exports predictably
A simple naming pattern saves time later. For example, search.png, search@2x.png, search@3x.png, and search@4x.png are easy to understand. If your project uses folders instead of suffixes, keep the same base filename across scale directories.
Review at real display size
Do not judge an icon only by zooming into the exported PNG. Place it in the actual interface size and check if strokes, corners, and spacing still feel balanced. Sometimes a mathematically perfect export still needs a small design adjustment for readability.