Overview

IcoMoon's new app comes with an SVG editor, which allows both GUI editing and code editing of SVG images.

After importing an SVG, you can bring up the vector editor by clicking or tapping on it twice. Alternatively, select a glyph and then press O to enter the editor.

To bring up the command bar to search available shortcuts and actions, use the question mark button in the upper right corner or press Cmd/Ctrl + K or Shift + : or Slash.

Main Area

The SVG you're editing would appear in the main area in the center of the screen. Other panels may appear on the sides or pop up from the bottom, depending on the size of the screen or browser window.

Touch gestures for zooming and scrolling work as they do in most vector editors.

Note: On touch screen devices, simple touch-moves register as scrolls, as expected. For other actions like marquee selection, drawing, or transforming, you will need to tap and hold for a short time. Upon activation, a small bubble would pop up from the bottom, providing better visibility of what's under the cursor.

When using a keyboard and mouse, you can zoom in and out by holding Cmd/Ctrl and scrolling with the mouse. Usual hotkeys for zooming in and out work too. Press + to zoom in, - to zoom out, and 0 to reset the zoom level and reposition the SVG in the middle.

The code editor will appear in the same main area, at the bottom. You can toggle it on and off by pressing Cmd/Ctrl + Enter. When the code editor is visible but not in focus, press the same hotkey once to bring it to focus. Press again to close it. Changes made in the code editor will automatically get reflected in the main area but won't get saved until you either press the toggling hotkey or the editor loses focus in some other way, such as pressing Escape.

Keyboard Toggle Buttons

Holding Shift or Alt/Option changes the behavior of tools in most vector editors. IcoMoon is the same except that it also provides a UI for these buttons on top, next to the zoom buttons.

This way, you can toggle them when you don't have access to an external keyboard. You may also double-click/tap on them in order to "lock" them. In addition to these two common toggle buttons, holding Cmd/Ctrl would enable or disable the snap functionality. Depending on the window size, additional toggle buttons may appear in the same region.

Panels

Besides the main area, there are four panels:

• Layers panel for rearranging layers or combining them.
• Style panel for editing properties such as dimensions, fill, and stroke.
• View panel for changing the grid/snap options and previews.
• History panel for moving the current state or toggling changes. Each SVG has its own history, separate from the other glyphs in the project.

You can toggle each panel using its button (shown above). These buttons would either appear on top or bottom, depending on the window size. You could also open each panel using the command bar.

Toolbar

A hovering toolbar on top of the main editing area lets you select and modify existing shapes or add new ones.

Selection

When the toolbar is in selection mode, you can select one element (and its children) by pressing once. Alternatively, you can drag to draw a marquee for selection. If the items in selection have any children or subpaths, a single click or tap on them would result in their selection. You don't need to tap twice to select inner children.

In order to add or remove from the selection, hold down the Shift key or use the Shift button.

In selection mode, the first button allows you to toggle the transform box, which enables you to resize and rotate selected shapes. When the transform box isn't enabled, path segments and control points can be selected and manipulated. Segments/paths can be dragged for moving them. You could also move shapes by dragging a control point while holding Alt/Option. Anchor points are represented as squares, while handles (off-curve points) are shown as round dots with a line connecting them to their corresponding anchor point. If the two handles of an anchor point align, selecting the anchor point will also select its handles; except when in Shift mode. Selecting the anchor once again would result in the anchor alone remaining in selection; similar to how selection of inner children, paths, subpaths, or segments works. A single tap suffices. Double-clicks/taps on anchor or handle points would result in selection of aligned handle points.

While the transform box is disabled, corner points would appear if the elements in selection have corners consisting of straight lines. Dragging these handles would change the rounding radius of the corner. Double-clicks/taps on a corner point would result in selection of all corner points of the corresponding element. When corner points are selected, you can press Up and Down arrow keys on the keyboard to increase and decrease the rounding radius. Deleting corner points is equivalent to resetting the radius to 0.

Pro Tip: Holding Alt/Option while marquee-selecting would restrict selection to control points. If any visible control points are inside the marquee, invisible control points would get ignored. When no control points are visible, any invisible point that falls into the marquee would get selected. This allows for quickly selecting control points even when the shape they belong to is not in selection.

The style picker tool works as follows:

• When some elements are selected, the style picker lets you pick/copy styles from other elements onto your selection. A toggle button in the toolbar allows choosing between copying only colors or copying all styles, including stroke width and opacity.
• When nothing is selected, the style picker would copy the styles of whatever object you select as the default style, which will be used when adding new objects.

Transform Box

When the transform box is enabled, a bounding box and 8 square resizing handles appear around the element(s) in selection. These 8 handles can be dragged for rescaling selected elements. Shift mode can be used for preserving aspect ratio, while Alt mode would result in symmetric resizing from the center of the bounding box.

The rotation handle is connected with a short line to the top center of the transform box. This handle allows rotating elements around the origin point. The origin point is represented as a bold and round handle with a distinct color. Tapping on it would toggle the transform box. It can also be repositioned by dragging.

Tapping once on the rotation handle is equivalent to using the Rotation tool, which enables rotation of elements with respect to their on-curve anchor points. When rotating, holding Shift would restrict the rotation angle to multiples of 15 degrees. Hold Alt to apply the rotation to a copy, leaving the original elements in selection intact.

Note: Changes made to the transform box are reflected under the Dimensions section of the Properties tab of the Style panel.

Pro Tip: After transforming an element, you might often need to apply the same transformation to other elements. This can be achieved using the Repeat Last Action command with hotkey . or via the command bar.

Adding and Modifying

In addition mode, there are four tools: Pen, Ellipse, Rectangle, and Polygon; all of which allow both parametric and visual/GUI drawing of new shapes.

You can hold Shift and Alt or enable them through the UI while dragging to insert shapes. This works with parametric insertions too.

The pen tool allows you to insert straight lines with a single click or tap, or to create Bézier curves by dragging. It can also modify curves of existing shapes:

• Press/drag on existing lines or curves in selection to add new anchor points to them. While dragging, you can move the point that's being added and adjust its exact position. On open-ended curves, you can move the point beyond the two ends of the curve to extend the curve. This is a powerful feature and allows extending a Bézier curve without adding new extra anchor points.
• Dragging an anchor point would reset its handles. Single clicks/taps would remove both handles.
• Dragging a handle point would reposition it. Single clicks/taps would remove the handle.

Layers Panel

This panel provides a tree-like view of the SVG you're editing, as well as options for rearranging, aligning, and combining child elements.

• Layers tab lists all child layers/elements of the SVG. Layers that appear on top are listed first. This is in contrast to the order in SVG code where elements that appear on top come later in the code. Selected layers get highlighted, and when applicable, you can select a new spot for moving the selected layers to a different position in the tree. Hold Shift for selecting all layers in between two selections.
• Arrange tab allows for aligning elements together or with respect to the viewBox of the SVG. In other words, it lets you align different edges of shapes together. You can specify whether alignment is relative to the entire selection, to one object/element, or the viewBox. This tab also lets you move elements up or down in the SVG hierarchy. Locking and hiding options are available too.
• Combine tab lets you perform boolean operations, which are mostly useful for turning intersecting shapes into one path. This tab also provides Join and Disjoin operations. Joining works both on anchor points and paths. As an example, it lets you join two shapes into one without the appearance changing. Joining two points would turn them into a single point halfway between the two points, which is often useful for closing an open path. Applying Join on a single open path would close it by adding a straight line. Disjoining a point would turn it into two non-connected points in the same position. In other words, it would open a closed path and split an open path into two. Disjoining a subpath would detach it and produce two separate path elements. Disjoining segments of paths would turn them into subpaths.

In practice, when you have access to a keyboard, you would mostly invoke these operations using their keyboard shortcut or by searching in the command bar.

Style Panel

This panel reflects SVG attributes/properties under the Properties tab. The Defaults tab lets you specify the default attributes used for newly drawn shapes.

When the root SVG element itself is selected or when nothing is selected, it will show controls for editing the viewBox.

Dimensions

With some elements selected, The Dimensions section of the Properties tab lets you view and edit the size, position, and rotation of the selection. The two fields on top let you select which corner of the selection is shown as the position. In other words, these fields reflect the origin point, which is the point remains anchored in place when applying transformations like rotation or reflection. The origin point would also remain anchored while parametrically resizing shapes, as opposed to when using the transform box in the main area. The button in middle lets you move the origin point to the geometric center or centroid of your current selection, which can be useful when rotating or resizing shapes like triangles or regular pentagons which have a different centroid than the center of the bounding box.

As depicted above for the angle field, you can enter simple arithmetic expressions in all number fields throughout the app. Even inputs like (10 + 2 ^ 3) / 2 work as expected. Where applicable, suffixing with % works too, for entering relative values. There are also some number fields that let you change their value by dragging a label/glyph on their left or right. Holding Shift while dragging would increase the rate of change while holding Cmd/Ctrl would decrease it.

The Embed Transforms button would effectively remove transform attributes and instead apply the same transformations to the shapes/paths in question. By default, trivial transformations such as scaling and translations won't add a transform attribute where possible. Using the Keep Transforms toggle under the Defaults tab, you can change this default behavior and make it so all transformations would add or modify the transform attribute. This means that rescaling a shape would affects its strokes too. If you stretch a shape horizontally, its stroke would also appear whder on the sides. You can later embed the transforms again if needed.

Advanced Example: After rotating an element, the transform box in the main area would appear slanted. If you need to further resize the shape vertically or horizontally, you could use the Embed Transform button to return to an axis-aligned transform box. Afterwards, you could disable the embedding in the history panel to return to a slanted transform box while keeping the effects of both transformations.

You will also find options for rounding corners and smoothness under Dimensions. Rounding currently only works for corners that consist of straight lines.

Appearance

This section of the Properties tab appears when you have some elements selected. It has controls for changing fill and stroke. Both plain colors and gradients are supported. Pressing F (for fill) and S (for stroke) would reveal the current fill or stroke. Pressing the hotkey a second time would open the color/gradient picker. Note that if your selection is empty, pressing the hotkey would reveal the default fill/stroke used when inserting new shapes, under the Defaults tab.

The Expand Shape or Stroke button, with hotkey E, would turn rounded corners and SVG shapes (ellipse, rect, polygon, etc.) into paths. When your selection consists of only paths, it would convert visible strokes to fills; this operation is also known as outlining or expanding. This can also be used for offsetting paths by setting the stroke width to twice the desired offset distance and expanding the stroke.

Pro Tip: Outlining strokes can be done temporarily, which can be useful for aligning strokes based on their outline. Use the history panel to disable the "Expand stroke" action while keeping the following edits/transforms.

View Panel

The Editor Options tab of this panel provides controls for toggling the code editor, the grid, and different snap modes.

The Preview tab can be useful for viewing the glyph at different small sizes. The Pixel Preview toggle in this tab affects both these previews and the main editing area.