SVG & PNG Icon Generator

Choose an icon, customize colors and size, and download it for free as SVG or PNG.

Select an icon
Preview background
Animation
0 icons

How to use the icon generator

The icon generator is a free online tool that lets you find, customize and download icons ready to use in websites, applications, presentations and design projects. No sign-up or install needed — everything runs directly in your browser.

Searching and selecting icons

Use the search field or browse the categories available in the panel to find the ideal icon. The library has hundreds of icons organized by theme, making it easy to find symbols for interfaces, social media, technology, business and more. Click any icon to select it and preview it in real time in the customization panel.

Customizing the icon

After selecting an icon, you can adjust the primary color and the secondary color to match your project's visual identity. You can also set the size in pixels and the stroke thickness, making sure the icon fits perfectly into your desired layout — whether for minimalist interfaces or bolder, heavier designs.

Downloading or copying the icon

Once you're happy with the customization, you have three export options:

With these options, the generator serves both developers who integrate icons directly into code and designers who need ready-made files for tools like Figma, Canva or PowerPoint.

Frequently asked questions

Are the icons free for commercial use?
Yes. All icons available in this tool are free to use, including for commercial projects. No attribution is required.
What's the difference between downloading as SVG and PNG?
SVG is a vector format that can be resized to any size with no quality loss. It's ideal for websites and applications. PNG is a fixed-size raster image — better suited for documents, presentations and platforms that don't support SVG.
Can I use the icons directly in HTML?
Yes. Use the "Copy SVG code" button to copy the source code and paste it directly into your HTML. This lets you style the icons with CSS and manipulate them with JavaScript.
What is the secondary color?
Some icons have two layers or distinct elements. The secondary color is applied to those elements — like an inner background, shadows, or extra details. For simple stroke icons, only the primary color is used.
Continue with another tool
Related articles
View all articles →