HomeNewsIntroducing the Icon Editor – The Iconfinder Blog

Introducing the Icon Editor – The Iconfinder Blog

medium bookmark / Raindrop.io |

1*RJwIO9S2cYsjQYfuyF3-7g.png<img class=”progressiveMedia-noscript js-progressiveMedia-inner” src=”https://cdn-images-1.medium.com/max/2000/1*RJwIO9S2cYsjQYfuyF3-7g.png”>

Our team worked hard to make the editor easy to use for anyone from a marketing specialist to an experienced designer. We wanted to present you with a simple tool that could help you do the most necessary actions — recolor icon or tweak its shapes — without the need to open it in a fancy editing software.

The icon editor has been in beta for a couple of weeks to collect user feedback and adjust accordingly, and now it’s out there for everyone to use.

<div class=”iframeContainer”><IFRAME data-width=”1156″ data-height=”720″ width=”980″ height=”610″ src=”/media/ecb10f9883c8cab5f3dd445b00bfe415?postId=6a3b141c76a3″ data-media-id=”ecb10f9883c8cab5f3dd445b00bfe415″ data-thumbnail=”https://i.embed.ly/1/image?url=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F655871129_960.jpg&key=a19fcc184b9711e1b4764040d3dc5c07″ allowfullscreen frameborder=”0″></IFRAME></div>

How to access the icon editor?

The icon editor is free to use for everyone. It will work with all icons that you have previously purchased, or, if you are a Pro subscriber, with any of the almost 2 million icons on the site, even if you haven’t downloaded them yet.

You can jump straight onto the editor from an icon page by clicking the “Edit icon” button.

1*_Cp7IFU3c9YxL7cHMblFeg.gif<img class=”progressiveMedia-noscript js-progressiveMedia-inner” src=”https://cdn-images-1.medium.com/max/1600/1*_Cp7IFU3c9YxL7cHMblFeg.gif”>

Opening the editor

Try it out here: https://www.iconfinder.com/icons/1519779/brush_colorful_office_paint_painting_palette_icon_school_icon#size=512

How to recolor an icon?

You can easily change the color of any element in the icon. Simply select the element, open the color picker and choose color or insert your own.

1*cqtcIUjuLu3-09nR8-pymw.gif<img class=”progressiveMedia-noscript js-progressiveMedia-inner” src=”https://cdn-images-1.medium.com/max/1600/1*cqtcIUjuLu3-09nR8-pymw.gif”>

Recoloring is easy peasy

Most of the times, the purpose of recoloring an icon is to make it match your branding guidelines. To make it easy to work with a brand color palette, your recently used colors will be saved in the color picker panel.

You can also insert your color in HSV, RGB or HEX format.

1*mboJUv_c-2yI-ZfZgLvBpw.png<img class=”progressiveMedia-noscript js-progressiveMedia-inner” src=”https://cdn-images-1.medium.com/max/1600/1*mboJUv_c-2yI-ZfZgLvBpw.png”>

Color picker menu

What else can you do in the editor?

It doesn’t end at just recoloring though. You can use the editor to draw additional elements using the Pencil, Line, Rectangle or Ellipse tools, or add text to the icon with Text tool. Working with any of these tools will open a customized menu on the right-hand side.

If you want to go as far as editing the shapes of the elements, double-click an element you want to edit for more options to appear on the right-hand side menu.

1*xuHkS7E2esGm0_P7AuqAjw.gif<img class=”progressiveMedia-noscript js-progressiveMedia-inner” src=”https://cdn-images-1.medium.com/max/1600/1*xuHkS7E2esGm0_P7AuqAjw.gif”>

Adding text and changing its color using “recently used” palette

Saving finished files

When you are done adjusting the icon, hit the “Download icon” button in the top right corner and choose to save it as either SVG (vector file) or PNG. The download will start automatically and will be simultaneously recorded on your Iconfinder account.

Feedback so far

It’s no secret that we haven’t been as excited about releasing a product as we are now for a while. Many improvements we continuously make on Iconfinder are less noticeable for a regular user, while icon editor is something that stands out and will surely be useful for a broad audience.

It’s been very rewarding to receive lots of positive feedback while running the beta. We will continue responding to the user feedback, so please try it out and let us know what you think.

“I just want to say that this Icon Editor is AMAZING! You guys are really doing a fantastic job 🙂 👍👍😍” — user from Chelmsford, Canada

“Just to say thank you SO much for this editor. I quite often just need to change the colour and you’ve done that, hurrah! Good work team!” — user from Ross, United Kingdom

“this editor amazinnngggg” — user from Istanbul, Turkey

P.S. That little truck icon we used in the examples is from Unigrid Phantom Vehicles vol.1 set by Icojam.

Featured articles on Prototypr: