Earlier in the year we looked at some handy, ‘pre-fab’ icons that were ready to plug straight into your mockups, prototypes and projects. But, being a designer, I know what it’s like – sooner or later you need to generate your own custom icons. Massimo did a great job covering vector icons last year. Today I want to look at the options for traditional pixel-based icons.
While it's perfectly possible to use Photoshop or any other full-blown graphics software to create/edit icons, specialized editors can be helpful when it comes to focussing on a specialized task like icon design.
There are dozens of both free and paid icon editors out there, both web-based and desktop. Some offer very limited, task-focussed functionality and are perfect for small quick fixes. Other editors with a wider set of tools and they give you the freedom to author your icons exactly as you want them.
It’s also worth noting that icon editors tend to fall into two categories:
a). Editors for producing favicons, Apple Touch icons (iOS) and app icons (PNGs and ICO files)
b). Icons for use in app and website UIs.
Let's start with the web-based editors. As a general rule they don't offer as much functionality as their desktop counterparts, but execute their core task efficiently. Icons tend to be small files, so they're well-suited for manipulation within a browser.
If you are looking for more advanced features, or perhaps larger, more complex icon sets, check the desktop apps for your OS.
1. X-Icon Editor
The first free icon editor we will look at is the web-based X-Icon editor. It runs in any browser above IE9 and it allows to create favicons for branding your browser address bar.
You can create icons in 4 sizes – 16×16, 24×24, 32×32, and 64×64. The tools it offers include standard ones, such as Brush, Pencil, Eyedropper, Line, Circle, Text tool, etc.
You can start with a blank canvas or import a jpg, gif, bmp, png, or an ico file, crop it as necessary and have your fav icon created in no time at all. X-Icon Editor doesn't offer much but it's fine if you want to create a nice fav icon in seconds.
2. Free Icon Maker
Free Icon Maker is another web-based editor. It has more functionality than X-Icon Editor but still it's not Photoshop. You can use it to modify an existing icon, or start a new one from scratch.
If you want, you can use the numerous icons and presets they provide for free. You can also import from your own SVG files. When you are done, you can download the whole bundle of PNG icons to your drive.
The editor is absolutely free to use (though the Try It For Free note on the homepage made me think they have a free trial only) but for most operations – i.e. upload and download of the created icons you need to register.
3. Junior Icon Editor
In comparison to the more limited choice of web-based icon editors, there are many more desktop ones, particularly for Windows. One of the best I’ve found is Junior Icon Editor, previously known as Free Icon Editor. This application is not only free but available across multiple platforms, such as Windows 8, 7, Vista, XP, 2003, 2000, ME, 98, 95, NT, iOS, Linux, Android, web and others.
Junior Icon Editor might have echoes of Paint but it is created especially with icons in mind. It works with multiple icon formats, such as ICO, PNG, XPM, XBM and ICPR. You can create not only standard-size icons but you can go with any custom size you need.
Learn PHP for free!
Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.
RRP $11.95 Yours absolutely free
The color depths of the icons are up to 32-bit True Color with 8-bit alpha channel.
The tools that come with the program are really numerous. Some of the tools you fill find are a pencil, brush, flood fill, text tool, spray can, color replacer, color selector, line tool, rectangle, curve and ellipse.
4. IcoFX Portable
IcoFX is another free icon editor you might want to consider. It has a free and a paid version.
IcoFX works with Windows XP, Windows Vista, Windows 7 and Macintosh icons. This application has really a lot of features, such as the ability to convert Windows to Mac icons and vice versa, custom effects and filters, batch processing, icon manipulation inside exe files, etc. I am not sure all these options are available in the free version but even if some of them are not, it still offers more than most free editors. This is a mini Photoshop for icons.
For Linux people, (they are fewer but loud) GIMP might be the best choice for icon creation/modification. There are a few icon editors, such as KIconedit (or the now defunct Gnome IconEdit) but basically they don't offer as much as the Windows icon editors.
Still, the features of KIconedit are quite respectable for some basic icon manipulation. Here is what the developers list:
- Rectangle, circle and elipse tools, outline and filled
- Rectangular and circular selection
- Line and Freehand drawing
- Colour picker, flood fill and eraser
- Can create template size or custom size icons
- Reads and saves a wide range of bitmap formats
- Rapid conversion to grayscale
- Resize of icon is possible
- Undo and redo on many functions
The list isn't deeply impressive but the program has all the fundamentals you need. If you need fancier stuff, there's always GIMP/Inkscape.
6. OS X Icon Editor and Icon Maker for Mac
These editors are two choices for Mac – OS X Icon Editor and – Icon Maker. In terms of features they are very different – OS X Icon Editor is aimed at users requiring a full-featured set of icon creation tools, while Icon Maker offers a more modest editing environment. Icon Maker is particularly useful for its drag-n-drop image-to-icon function.
Unlike Icon Maker, OS X Icon Editor offers much more. In fact, it's a bundle of 5 separate programs:
- Icon2icns and
Pic2Icon allows to convert any picture into an icon. Icon2PNG is used to turn an icon from another format into PNG. icns2icon is for converting ICNS files into other icon formats you can use in other application. icon2icns is the opposite – it allows to convert an icon in another format to ICNS. icon2ico is for creating .ico files from icons in other formats. For more advanced edits, the author recommends to use GIMP.
And finally we have Logaster.
This is a quick and easy online tool that helps you generate your favicons and icons. Unlike the previous entries on my list, this one does most of the heavy design lifting for you, via their logo creation wizard. You’ll still be able to customise the design with their editor, but it’s a quick and easy way to pump out some mocks if you’re in a hurry.
The Wrap Up
Each of these icon editors does a fine job – it just depends on the purpose you need them for. The basic ones are perfect for quick edits, while the more advanced ones do a great job for more complex tasks.
My personal preference is to go for the web-based apps because they are accessible from anywhere and I don't require any installation. If you, like me, are not creating icons every day, it can be handy to limit that task to a temporary browser app.
Ada is a fulltime freelancer and Web entrepreneur with more than a decade of IT experience. She enjoys design, writing and likes to keep pace with all the latest and greatest developments in tech. In addition to SitePoint, she also writes for Syntaxxx and some other design, development, and business sites.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers