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?

  1. Play with the inputs in the left column
  2. The icon in the middle should reflect your change in real-time.
  3. 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.

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.

In the future, texture will also be available like wood or stone for example.

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.

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.

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.

More

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