Studio: online SVG editor with PNG export

What is it?

The Studio is the set of tools displayed in the left column of each icon page when you browse the site on a large enough screen (sorry phone users).

These various controls let you tweak the default icon to better suit your needs. Note that it's voluntarily quite rudimentary, and you should always rely on a complete editor like inkScape to do the heavy work.

Examples of what you can achieve in 30 seconds:

How does it work?

Play with the inputs in the left column
The icon in the middle should reflect your change in real-time.
When you're happy with the result, export your creation in SVG or PNG using the download buttons on the right.

What does it offer?

The Studio is divided in a few collapsible sections moving like an accordion. Click on the name of each section (i.e. Background) to expand or contract it.

Colors

Many of the options below (Background, Foreground, Frame…) handle colors. Each time you need to adjust a color, click on the round swatch and a floating palette will open.

RGBA means Red, Green, Blue and Alpha (transparency).

Background

The background is the big black square. You can change its color and its shape from a predetermined list containing stars, hexagons, octagons…

⇒⇒

The color can be plain or transparent, but you may also decide to use simple gradients.

Alternative settings let you replace the plain color by a pattern (lines, circles, waves…) or even full fledged textures like rock or wood.

Foreground

The foreground is the "meat" of the icon, what makes it unique. Its color can also be adjust.

You can apply many transformations: flip (mirror), rotation (45°) or scale (zoom).

⇒⇒⇒

The clip checkbox is used as a constraint to keep the foreground inside the bounds of a starred background for instance.

⇒

One special effect is available: drop shadow. Decide the spread of its blur, its x/y offset and where it should appear (inset / around).

⇒

If you only play with a small blur radius, and keep the same color as the foreground, you can achieve a nice glow effect.

You may also apply a stroke to the foreground by determining its color and width.

Multiple foregrounds

What about applying different colors to various parts of the icon? It's possible by pressing the Break Apart button.

⇒⇒

In this whale example, the main grey foreground has been divided in 3 sub-paths by clicking on the Break Apart button. Navigation arrows now let you jump from one path to the next. Alternatively, you can also click on the different parts of the foreground on the main canvas. For each piece of the puzzle, you can now tweak the color, the shadow and the stroke individually. Transformations like scale or rotation, still act on the group.

Sometimes, breaking apart a foreground with hollow paths will make these holes disappear. Don't panic, they can be selected and filled with the background color.

Frame

This input let you tweak the thickness of the border around the whole image.

⇒

Text

Type some letters in the "content" box to make a label appear over the icon. By default its position is centered but you can freely move it by dragging it with your mouse.

There's not a lot of choice in fonts yet, some web-fonts may be provided soon.

⇒

Badges

Badges are like inception: small icons in your icons! They let you produce deviations. For example you can add a fire badge to an armor icon to get a fire armor

They can be drag with the mouse and have their own colors.

You can also use the blank badge to write arbitrary letters or numbers on top.

To see all of them, head over to the badges gallery.

Size

As you noticed they're all power of 2. Thanks to SVG, everything remain sharp even at 512px.

⇒⇒

Preset

The dropdown displays a list of already made values combinations, like a red / yellow theme (fire) or green / black with glow (hacker terminal).

Pressing the "reset" button will set the Studio back to its original state.

Found a bug or need a new feature? Tell us more. Have fun!