Customize icon color, background & radius — download as PNG without SVG overhead.

PNG, SVG or ICO?

PNG keeps every detail without quality loss and supports a transparent background. That makes it a good fit for icons, logos and graphics with clean edges. If your icon will sit on colored sections, choose a transparent background in the tool.

SVG is a vector format. It scales to any size and stays sharp. If your website or CMS accepts SVG files, it is a good choice. If it doesn't, PNG is the right format.

ICO is an old Windows format for program icons. MDN advises against using it for regular web content; it only lives on as favicon.ico. A favicon needs several files anyway – our favicon generator creates them from a single icon.

Which size should you download?

Export the icon larger than it will appear on the page. Some screens have a high resolution: they use two or more real pixels for each pixel of your layout. An image that is too small then looks grainy.

An example: if your page shows the icon 64 pixels wide, download at least 128 pixels. In the tool, 200 pixels is a good pick. You can choose anything from 100 to 1,600 pixels. Don't go much bigger than you need, though – that only makes the file heavier.

One style across the whole site

Use icons from one set wherever you can, with the same stroke width and only a few colors. Cards, lists and contact blocks then look calm and consistent. The tool helps with this: it remembers your colors, corners, stroke width and size for your next visit.

Icons work best next to a short heading and a line about the benefit. How icons, copy and a clear call to action fit together on one page is covered in our guide how to create a landing page.

Enough contrast with the background

An icon has to stand out clearly from its background. The accessibility guidelines (WCAG) ask for a contrast ratio of at least 3:1 against the neighboring colors for graphics people need to understand the content. Purely decorative graphics are exempt. Very light colors on white are therefore risky. On request, our free website check also looks at contrast.

Icons support text – they don't replace it

Not everyone reads a symbol the same way. So always put a short text label next to the icon.

Screen readers – programs that read pages aloud for blind and visually impaired people – use the alternative text (alt text) of an image. If the icon is only decoration next to text that already says everything, leave the alt text empty (alt=""). If the icon itself is a link or button, the alt text says what happens: “Print this page” rather than “printer icon”.