Icon Studio: Design Your Own Icon (Complete Guide)

Watch the Icon Studio video guide

Watch this guide on YouTube, or follow the desktop steps below.

Create a custom icon in Icon Studio using its desktop editor. In this walkthrough, we add a Line-style home icon, change its colour to blue, reduce its scale to 85%, then inspect the export options. The screenshots come from this actual desktop editing session.

Editing is free. Copying SVG and downloading SVG or PNG require HubToolify Pro. The export buttons show a Pro label when your account does not have access. The editor and its artwork are covered by the licences and usage rights.

Desktop workspace: choose artwork on the left, compose it in the middle and edit or export it on the right.

1. Open Icon Studio and add an icon

Open Icon Studio. On desktop, the icon library is on the left, the canvas is in the centre and editing controls are on the right.

In the left library, leave Set on All icons and choose Line in Style. Click Search icons, type home, then click the home result to add it to the canvas. You can also drag a result onto the canvas to choose its starting position.

Use the Set dropdown to narrow the library. The three available add styles are Line, Solid and Duotone. Style applies to the next icon you add, so choose it before clicking a result.

2. Select, move and resize your icon

Click the icon on the canvas to select it. Drag the icon itself to move it. Drag a corner selection handle to resize it; drag the handle above the selection to rotate it. You can also select the icon by clicking its name in Layers on the right.

For more precise adjustments, use the controls below Layers on the right. Hover over an icon-only button to read its tooltip:

• Scale: change the size with the slider or percentage field.
• Rotation: enter an angle or use the slider.
• Position arrows: nudge the selected icon up, down, left or right.
• Centre: place the selected icon in the middle of the canvas.
• Flip horizontal / Flip vertical: mirror the selected icon.

For this example, enter 85 in the Scale percentage field, leave Rotation at 0, and click Centre. The home icon becomes smaller with more space around its edges. Controls that need a selected icon are disabled until you select one.

3. Change the colour and add a background

With the home icon selected, click the blue colour swatch (#1766f2) below the transform controls. The outline turns blue. Use Custom colour for another brand colour. For an outline icon, the Stroke control adjusts the line weight.

The edited example: blue Line-style home icon, 85% scale and a transparent canvas. The layer remains selected so you can continue adjusting it.

There are two different background controls:

• Canvas background fills the whole artwork. Its corner-radius control rounds the canvas background.
• Icon background adds a plate behind the selected icon. Adjust its corner radius and padding to make a badge or app-style tile.

Leave the canvas background transparent if you want to place the icon over another design. The checkerboard is a transparency preview; it is not part of the exported artwork.

Our example keeps the canvas transparent. To make a coloured tile instead, select a swatch under Canvas background and adjust its radius. Check that the icon colour remains easy to see against the background.

4. Combine icons, badges and letters

Return to the left library. Its three tabs include icons, modifiers and elements; hover over a tab to see its name. Click Modifiers, add a badge, then select that new layer and reduce its Scale. Drag it toward a corner of the base icon. Move and scale each item separately so the home remains recognisable.

Each added item appears in Layers. Select a layer to edit that item. Layer controls let you hide, reorder or remove items; Bring to front moves the selected item above the others.

Expand Draw & letters at the bottom of the left library to access drawing tools and letter buttons. Click a letter to add a text layer, select it, then use the text controls on the right to change its words, font, weight, size and line height. Keep the text short: an icon that looks clear at a large size can become unreadable in a small button.

5. Undo changes and check the final design

Use Undo in the right panel to step back after an unwanted edit and Redo to restore an undone edit. Clear removes the composition; use it when you want to start again.

Before exporting, check the following:

• The symbol has space around its edges and is not clipped.
• A badge does not cover the part that makes the main icon recognisable.
• The colour works on the background where you will use the icon.
• Letters and thin strokes remain visible at the intended display size.

The size-preview strip below the canvas shows the composition at 16, 20, 24, 32 and 48 pixels. Inspect the smallest size you intend to use. If a badge or letter disappears, simplify the composition before exporting.

6. Export SVG or PNG

Scroll down the right editing panel to the export block, below Undo, Redo and Clear. Choose Export size: 64, 128, 256, 512 or 1024 pixels. For this example, keep the default 256.

The real export panel. These actions require Pro; this guide demonstrates editing and the available controls, rather than claiming a completed Pro download.

Choose the format for your destination:

SVG keeps the design as vector artwork. PNG uses the selected export size. Keep the canvas background transparent if you need a transparent result, and check the saved file on a contrasting background.

Export requires Pro. If you see the upgrade dialog, sign in with an account that has Pro access or review the plans. Editing access alone does not unlock downloads.

If you switch to a phone

Desktop uses three columns. On a phone, the same tasks move into a bottom dock:

1. Canvas returns to the artwork.
2. Add icons opens the library and drawing tools.
3. Edit opens layers, transforms, colours, backgrounds and text controls.
4. Export opens the size and download options.

The canvas stays behind the tool sheets. Tap Done, Canvas, or the active dock button to close a sheet. Adding an icon or choosing a drawing tool returns you to the canvas automatically.

Common questions

Why are the scale and rotation controls disabled?

Select an icon on the canvas or in the layer list first. These controls apply to a selected icon group.

Why did changing Style not change the icon already on the canvas?

The library Style dropdown chooses the style for the next icon you add. Choose a style and add a new version if you want a different base appearance.

Is the checkerboard included in my PNG?

No. It represents transparency in the editor. A chosen canvas or icon background is part of the artwork; the preview checkerboard is not.

Can I edit for free and download without Pro?

Icon Studio editing is free, but its Copy SVG, Download SVG and Download PNG actions require Pro. The icon library has its own free and Pro options; see the icon style guide for those differences.

Ready to try it? Open Icon Studio, add one base icon and build a simple design before adding more layers.