How to edit a PNG or SVG icon online with Icon Editor
So the story goes like this: you’ve been working on your latest design project—a friendly weather app— for some days now, putting time and care into making sure everything is visually consistent across every piece. The colors are selected, the fonts are on point, and you’ve just found the perfect icons to spice things up.
Except… there’s something off. A tiny detail. Or maybe details, in plural.
The icons’ colors? Hmmm, they don’t quite match the rest of the project’s tone, do they? And the stroke width might just be too thin compared to the fonts you’re using.
Fortunately, stories like these now have happy endings thanks to the Icon editor, our built-in feature for customizing any of our icons. Wanna hear more about it?
Table of contents
How to customize an icon with Icon Editor
With the Icon editor feature, you can edit any of our icons for your project in no time without using external software or advanced design skills. It’s pretty intuitive— all you must do is follow these steps.
- Search for any desired icon: If you can imagine it, you can find it in our icons gallery, filled with thousands of icon families in every style.
- Open the detail view: Once you’ve found it, select the icon you’re interested in to open its detail page.
- Click on Edit icon: You’ll find this option at the right part of the detail page, right under the download and copy buttons.
- Start editing your icon: Fine-tune all the details you find necessary.
Okay, but what details can you customize with our Icon editor? We’ve made sure our editor covers all the main elements of an icon, making the editing experience as user-friendly and efficient as possible.
How to change an icon color
Let’s say you’ve found the perfect icon family for your project. This happy sun will serve as our guinea pig for this example, but you can try out any icon. Firstly, you can edit any of the colors of your icon to match your brand’s visual identity. Choose a new color or introduce its HEX code, and make it solid or gradient.
How to add shapes to your icon
You can also add additional shapes, such as circles, squares, or rounded squares, to highlight your icon further by editing the shape’s size or color.
How to change an icon’s display
Speaking of resizing, display options are also editable. You can resize, rotate, flip, or move the icon through the grid to perfectly match your needs.
How to modify the icon’s stroke width
Lastly, you can filter your icon search to get results with editable stroke width. Make it as thick or thin as you want, keeping a consistent width throughout the whole icon.
Don’t be afraid to experiment, you can always reset and go back to the original version of the icon or undo any change.
Download your edited Icon in PNG or SVG
Once you’re done with editing, it’s time to download your new masterpiece. This step might be the most important one—leaving the editor without downloading the new icon will reset it back to the original version.
Remember you can download your icon in PNG and SVG formats, or copy any of these two to use it right away in your project.
Keep up the good work with Icon editor
The icon editor has been developed with one goal in mind: to help you save time and resources by adjusting our assets to your needs in one place. And, since you won’t be needing Photoshop or Illustrator, it will also help you save space in your computer 😉.
This tool eliminates unnecessary design dead ends and boosts your efficiency with an easy-to-follow editing experience.
There’s so much you can do with our gallery of icons, so don’t miss this article on how to make the most out of them! Here you’ll find a guide on how to find the best icons for your project, as well as the main differences between our icon families.
We can’t wait to see how it helps you create amazing projects. Don’t forget you can share them or ask for advice in our Facebook and Reddit communities.
We’ll see you there!
