How do I export a sharp icon that stays clear at small sizes?
Quick answer
Make a copy of the icon, view it at the size where it will actually appear, and simplify details that blur or crowd together. Check the outline and the space around important parts at that size, not only while zoomed in. Export in the format and dimensions required by the destination, then reopen the exported file and inspect it at its intended display size. There is no single best size for every use.
The question, the details, the next step.
I have an icon that looks fine when I’m zoomed in, but it turns into a blur when it’s small. Where should I start?
Start by checking the icon at the size it will actually be displayed, in the place it will be used. Make a duplicate before editing so you can compare versions. At the small size, look for details that merge, narrow gaps that disappear, and outlines that become hard to distinguish from the background. Simplify or enlarge only the parts that need help, then check again at the same display size.
For example, suppose your icon has three tiny marks inside a larger shape. If they read as one dark patch when shown small, try fewer marks or more space between them. Treat that as a design choice to test, not a fixed rule about how many details an icon may have. Google’s Android icon tutorial likewise recommends simplifying complex shapes and checking previews across sizes and contexts; its particular workflow is for Android launcher icons, not a universal requirement. [S1]
How do I check whether the edges and spacing are still clear, rather than just judging it by eye while zoomed in?
Use a small-size preview at the intended display dimensions, and inspect it at normal viewing scale rather than relying on a magnified canvas. Try it against the background or in a mockup similar to its destination if you have one. Check three things: whether the silhouette is recognizable, whether important interior gaps remain open, and whether any detail touches or crowds the edge. If the destination has more than one display size or context, preview each one you know about.
A useful test is to show the preview briefly, look away, then check whether the main shape is still easy to recognize. If not, adjust one thing at a time—such as widening a gap or removing a tiny element—and compare the result. A preview can reveal problems, but it does not establish how the icon will look in every app, screen, or display setting.
Should I export it as PNG or JPEG, and should I make it bigger first?
Follow the destination’s stated format and size requirements first; those details can vary, so there is no universal export dimension. If you are choosing between PNG and JPEG for a simple icon, PNG is a sensible option to test for line art: Microsoft describes PNG as lossless and suitable for line art, while JPEG uses lossy compression and is primarily suited to photos. [S2] Check the saved result rather than assuming the file type alone guarantees a clean appearance.
If your design app has a vector original, keep it as your editable master and export a copy for the destination. If you have only a raster image, making the file larger does not restore image information that is not there; Microsoft notes that resizing a raster picture does not add image information. [S2] Export at the required output size when possible, then inspect the exported copy at its intended display size.
Can you give me a repeatable final check? Assume I’m preparing a small icon for a project page, but I haven’t been given exact export requirements.
With those assumptions, keep the editable original and make a separate export. Don’t guess a required pixel size or format: first check the project page’s settings or ask whoever manages it. Until you know, make a preview to assess the design, but treat it as a proofing copy rather than a final, requirements-compliant deliverable.
You can copy this note into your handoff:
“Icon: [file name]. Intended display size: [size or unknown]. Destination: [project page]. Export format and dimensions: [requirements or pending]. Checked at intended display size: [yes/no]. Small details simplified: [notes]. Remaining concerns: [notes].”
When requirements arrive, export a fresh copy to match them and reopen that copy for a last small-size check. A clean preview cannot tell you requirements that have not been supplied.
A practical checklist
Keep an editable original and make a separate working copy.
Find the intended display size and destination requirements; mark unknowns instead of guessing.
Preview at the actual display size and inspect silhouette, interior gaps, and edge spacing.
Simplify details that merge or crowd together, then compare the revised preview.
Choose a format suited to the artwork and destination; check the exported file itself.
Record the size, format, preview check, and any remaining concerns for handoff.
A few more useful answers
Is designing at four times the final size always best?
No. Google’s tutorial uses artwork designed at 4× scale in its Android launcher icon workflow, but that is an example specific to that workflow, not a universal export rule. Follow your destination’s requirements and inspect the result at the intended size. [S1]
Will exporting a raster icon at a larger size make it sharper?
Not by itself. Resizing a raster picture does not add image information, so check the available original and the required output size before choosing an export. [S2]
Is PNG always better than JPEG for every icon?
No format is automatically best for every destination. Microsoft describes PNG as lossless and suitable for line art, and JPEG as lossy and primarily suited to photos; check the destination’s requirements too. [S2]
Sources
References used for this guide.
- [S1] Design and preview your app icons | Google Codelabs codelabs.developers.google.com · Checked
- [S2] Tips for working with images in Publisher | Microsoft Support support.microsoft.com · Checked