Icon Maker (Free-to-Edit version)

How to Edit

If you read the HTML source, you can roughly understand how it works. What a relief!
◆Simple ◆Able to be copy and pasted ◆Easy to understand◆

You don't need to mess with Javascript at all. If you add a tag, it will automatically recognise it.
If you specify the data-mkclip attribute, it will be recognized as a mask image, and the white part will be masked and made transparent when compositing.
If you specify the data-mkcolor attribute, the line color and fill color settings will be ignored (that is, the color will be synthesized as is).

"maker.js" doesn't have any special license, so feel free to use it.
Please refer ↑ here ↓ for copyright info about the enclosed images, and ↑ here ↓ for the original JP source of this code.

[TL note: I am not fluent in JP, so most of this is machine translated.
If you would like to contribute better translations, please feel free to contact me.]

Line Color


Fill Color



None Free Icon Free Icon 2 Privacy bar

Base Character

None Dog Cat Fox Raccoon Rabbit

Background Frame

None Circle Square Rhombus Semicircle (top) Semicircle (bottom) Star Cloud (above) Cloud (below) Bubbles


None Color fill Color fill (reverse) Vertical stripes Horizontal stripes Radial Space Space (reverse) Suits Suits (reverse)
Dots Dots (reverse) Oranges Oranges (reverse) Pattern Pattern (reverse) Web 2.0 Macedonia radial

Make Your Own Icon Maker

This icon maker can be edited with just plain knowledge of HTML. Download the template to play around with it.

English Version Code download:
ZIP file here.