Google Facebook GitHub

Documentation

Create metro-style icons.

The images created with this editor use transparency for the color (non-white) parts, making them particularly well-suited for use in web applications in combination with CSS hover animations. This also makes them easily stylable according to, for example, the application state or user personalization. If you are logged in, you can save and load entire sets of icons in storage. Convenient for keeping your entire application's catalog of button icons organized.

Click on the (+) button to add a new icon or click on the double-document button in an iconbox on another icon to duplicate it. Click on the iconbox to open the editing panel at the bottom of the screen. From there, click on the pictures at the corresponding position to change it (you can text-search for the right image). Or change any of the options. The "Resource" is the central image, "Decals" are the images at the corners. Select multiple iconboxes at once by clicking on the first, then shift-key+click on the last of the range you want to select. This way, you can change multiple images or settings at once.

Contact me if you'd like to have an image added, have bug-reports or feature suggestions or would simply like talk to me for any other reason.

Metro Icon Editor
Name: 
px (8-256px)
% (0-100%)
% (0-100%)
% (0-100%)