main settings
text effects

Main shape

Pick Color


Pick Color

Icon group

Icon size

Shape size

Icon opacity

Icon effect

Infinite Shadow

Pick Color


Pick Color

Set rounded corners

Square corners

top left

top right

bottom left

bottom left

Border Thickness

Border color

Pick Color

First layer pattern

Second layer pattern

Opacity layer 1

Opacity layer 2

Icon Shadow

Main Inset Shadow

Angle of shadow

Icon 'hover' animation

Icon 'clicked' animation

Mainshape 'hover' animation

Mainshape 'clicked' animation:

Icon 'hover leave' animation

Tooltip 'Clicked' animation


Iconfader Colors

Pick Color


Select tooltip font

Tooltip font color

Pick Color

I. Prologue and difficulty of settings

So you have come this far, reading up on instructions. In any case you wont get disappointed if you take some time fiddling around with this icongenerator. At first things may not seem to be very straightforward but fiddling around with all the available settings will give you a sense knowing where you want to take this tool.
In the first place we need to mention the level of difficulty for the settings. Advanced settings off will keep things pretty basic and is good to start of with, so to get acqainted a bit to the environment and the most basic settings. By the time youre getting hooked playing around with the icons, you will probably have enabled the advanced settings allready.

II. Information about options which have a need for specific other settings

Like the title sorta gives away, there are certain settings which go well with other specific settings (Doh!). With near infinite possibilites it's impossible to mention all colliding and complementing settings. We will limit ourselves here, making a mention of some of the bigger Do's and Dont's":

  • Icon size in relation to shape size: Try to keep the size of the inner icon well within the boundaries of the main shape. We have not yet implemented the possibility to make the inner icon itself exceed the size of the outer shape.
  • Text effects: the text effects have a craving for subtle color settings, for example, the 3d effect: seriously casual likes a very light icon color and also a medium to light main shape color while neon glow effects come out best with a black or very dark backgroundcolor of the mainshape. As was said, we are not going to get into detail to much. This would spoil have the fun. Just keep in mind that a selected effect can look no good while with some adjustments elsewhere it really starts standing out.
  • Borders: just one little thing here, squaring a corner while rounding the other corners also work best with a low rounded corners value. This doesn't imply you can't go beyond the scales. There are even very odd mutations possible with for example rounded corners maxed and opposite corners squared. This creates somewhat of an eyeshape which can be emphasized by selecting an orb button in layers section. Sky is the limit ey?
  • Layers: on simple settings, there is only one texture/pattern layer available. on advanced there are 2 layers which you can blend with eachother and with the base color of the mainshape. With no textures/patterns selected changing opacity can make things go a bit fubar since your blending something with nothing so to speak. Secondly, some patterns stand out better on a larger size and get a bit teenyweeny on low size. Last thing we need to mention is the usage of textures with certain forms, especially the orb buttons. These orb buttons are circular and work 'only' with maxed rounded corners in the borders section.
  • Shadows: most important thing is that enabling (inner) icon shadow will disable any text effect selected. the main shape inset works best with rectangular forms but that might be a matter of personal taste.
  • Animations: this is the most extensive settingstab and things can go very ugly with advanced settings or either the animations really complement eachother in a beautiful way. Not much to point out other then, have some swings and try to get some good combo's going.
  • Tooltip: nothing much which can go fubar here other then that you have to keep an eye on the contrast of tooltipfontcolor and either mainshapecolor or backgroundcolor of your website in the case the mainshape vanishes via animation after clicking.

III. Default, Saving and Loading

below the iconswindow are a few buttons which control the following: Go back to defaultsettings, save settings, load settings and export to source. Defaultsettings is pretty self explanatory and can be used if you went apeshizzle and made everything go fubar. No point in putting settings back to original, just fire this button. As far as loading and saving goes, at the moment (will change in v1.1) we have not yet included database functionality so the settings are saved to a cookie on your computer. This cookie will stay alive for 1 month and then the only saveslot you have at this time will be empty again. In v1.1 we aim to upgrade the number of saveslots to a plural amount after registering on the website.

IV. Exporting to Source files

Firing the export button will immediatly convert the current settings of the icon to valid css and html, it will gather the necassary files and put them in a zip for you to download. The main file in the zip called index.php will only show 1 icon but you will get additional information in your browser when starting index.html about how to get more and/or other icons. Pretty easy if you got some sense how html and css works. Little javascript is involved and we are planning to reduce the usage of javascript even more in the near future.

V. The Icons themselves

The used icons (which you can select via icongroup in mainsettingstab and by scrolling back and forth via the arrowkeys in the iconswindow) are actually a font. You probable have heard it before or even have used them yourselves alot of times, but the used iconset is from Fontawesome. In a major versionupgrade after 1.1 we might implement .svg icons also (more possibilites) but for now we are sticking with the FontAwesome set. For more information about FontAwesome we refer to their website and to the page with all available icons in particular.

VI. Upcoming changes to forfill any unsatisfied sentiments

To keep everyone coming back for moar, we will implement small changes like new animations, texsteffects and layertextures very often. Other then that, there are major new features planned for the next major versionupgrade, being v1.1. We want to implement a configurable box shadow for the main shape, colorgradients for mainshape and maybe borders. We also might re-implement (was taken out in beta) the possibilities to use several borders at once.
The biggest and most interesting features which will arrive at v1.1 is the possibility to export the icons to cropped images(!) and the option to upload your own textures and/or iconimages for usage within this tool. If you got a good suggestion then give us a howler!

That's it, go on have fun messing around. If you have half the fun we had from creating this icongenerator you are good to go!

//--> end of instructions

Advanced settings

Text For Each
Specific Icon
Text For Each
Specific Icon
Text For Each
Specific Icon


Creative Commons-Licentie
Iconoplastix Exported Icons van is in licentie gegeven volgens een Creative Commons Naamsvermelding-GelijkDelen 4.0 Internationaal-licentie.
Gebaseerd op een werk op

Suggestions and Feedback

Iconoplastix Icongenerator is still in the (open) betaphase. This means that any information about experienced bugs/issues, suggestions or feedback is appreciated in a way which is beyond normal. Fiddle around as much as you want but please do send us your thoughts about how we can improve our tool. We are here to stay and we will do our very best to to make this 'the One Icongenerator to Rule All Others'. Usersuggestions and feedback are a big part of the upgrading process. Don't be shy and pitch us a line, we don't bite (a nibble maybe tho).


Please fill out the form below and submit to send your message.

* For security reasons, please answer next question:

information about upcoming release

next major release: Version 1.1

planned new features/options/changes for version 1.1 (or any earlier small versionupgrade):

Save a Rainbow Unicorn! Donate Today.

This tool takes quite a toll when it comes down to soaking up precious bandwidth. The strain on our available bandwidth will be especially heavy with the upcoming feature of being able to export the icons to images.
This tool is totally free and we want to keep it like that in the future! We cannot keep the icongenerator free for use, nor will we be able to implement the export icons to image feature without donations.
Are you using any icons exported with this tool and are happy with them? Do you appreciate what we are delivering here? Or do you have any money to burn and looking for a superawesome cause to support? If any of these questions are answered with yes then please consider making a donation today!

Continue to Errocode1337's donation page!

About us

Iconoplastix Icongenerator copyright 2014

Main developer/coder: Sven Wesseling, Follow Sven on Twitter

Technical support and code reviewing: Mischa Kroon, Follow Mischa on Twitter

betatesters: Mischa Kroon, Ricardo Philips, Sven Wesseling

graphics: Sven Wesseling

gui design:

Big Thnx to:

Codrops // Premium Pixels // Jack Moore

Greetz go out to:

Padua, Tijs van Bakel, Limp Ninja, all my ex-lovers, Dr. D and Mybri

disclaimer: No Fluffy Rainbow Unicorns, nor any Stardust Elves were harmed in any way during the development of Iconoplastix

Save Icon Settings to Cookie

Cookie duration: 1 month
Are you sure you want to save settings?

Click here if you want to continue with save

All previous saved settings will be lost!
note: Database functionality in next versionupgrade. Register and gain more then just 1 saveslot! Stay updated.

Load Icon Settings from Cookie

Cookie duration: 1 month
Are you sure you want to load settings stored in cookie?

Click here if you want to continue and Load

All current settings will be lost!
note: Database functionality in next versionupgrade. Register and gain more then just 1 saveslot! Stay updated.