Logo editor guidelines

The logo editor

The logo editor consists of 2 parts: the canvas and the controls. The canvas is where your logo is displayed, and the controls are where you can edit parts of your logo. The controls are organized in different sections, like layout, icon and name. You can either click on parts in the canvas or on the sections in the controls to edit different parts of your logo.

Setting colors

A logo consists of different elements like a background, icon or brand name. All these elements have a fill color. You can optionally create a gradient from this color, or add some subtle effects.

Fill

This sets the color of the selected logo element.

• color sets the fill color. For some elements, you can also enable the on/off switch to link this element to another element so their colors match perfectly.
• gradient creates a color gradient. You can use the on/off switch to enable the gradient and you can use the slider next to it to adjust its strength. In case of linked elements, a single gradient fills both elements.
• type selects the type of gradient: linear or radial.
• style determines which color style the gradient has: light, deep, rainbow or intense. Each gradient style has their own characteristics. A gradient style is always applied to the fill color, so if you want to adjust color of the gradient, you can change the fill color, gradient strength and gradient style.
• rotation adjusts the gradient angle.
• size adjusts the gradient size in case of a radial gradient.

Effect

The effect enables you to add a subtle effect to a logo element. Please note that some effects are not visible when you have a complete black or white background.

• strength enables a visual effect. You can use the on/off switch to enable the effect and you can use the slider next to it to adjust its strength. In case of linked elements, a single effect will be applied to both elements.
• type sets the effect type. We have a couple of different effects ranging from waves to polkadots to a bokeh effect.
• detail sets the effect size. The higher the detail, the more detailed the effect will be.
• style sets the effect color. You can use light, dark, white or black to select the effect style in relation to the fill color.

Layout

The layout determines the general layout of your logo. It places all the elements of your logo in a coherent way.

• type sets the layout of your logo. For example, you can select a horizontal or vertical arrangement of icon and name, or include a container shape around your icon. There's also an option to place your whole logo inside a container shape or to use a monogram instead of an icon.
• size sets the size of your logo in relation to the background container. Please note that your logo is infinitely scalable when you purchase the Professional package, so generally it's best to use the default setting of 100%.

Background

The background element is the main canvas that contains your logo. Please note that when you purchase the Professional package, you also receive a version of your logo that has a transparent background.

Symbol

The symbol element is the shape around your icon or monogram. This shape is a smart shape, meaning you can adjust its form by using the controls below.

Shape

The smart shape controls the graphical form of your symbol.

• type sets the shape type. You can select a circle, star or polygon shape for example. Use the last shape to create a ragged circle, to create a more organic feel.
• size determines the size of the shape. Note that when you change the size, the logo name and slogan will automatically adjust.
• rotation rotates the shape. This is helpful when you want to use a star shape for example.
• form sets the aspect ratio for circles and squares, making them ellipses and rectangles instead.
• sides sets the number of sides in case of a polygon.
• spikes sets the number of spikes in case of a star.
• inset sets inner radius of a star, making it less or more pointy.

Outline

This controls the outline of shapes that have corners. It lets you further detail your own shapes so that they fit your brand's look and feel.

• corners sets the type of corners of your shape. You can choose rounded, chiseled or smooth corner types.
• corner size determines the size of the corners.

Cut-out

The cut-out element is used to cut out shapes from the symbol shape.

Shapes

The shapes to cut out from the symbol shape.

• line enables the line cut-out. You can use the slider to control its width.
• line position controls how far the line cut-out should be placed from the outer side.
• ring enables the ring cut-out. You can use the slider to control its width.
• ring position controls how far the ring cut-out should be placed from the outer side.
• hole enables the hole cut-out. You can use the slider to control its size.

Icon

This is your logo icon. It's the main visual element of your logo. We have millions of icons to choose from, so you can perfectly personalize your logo.

Icon

Controls the icon of your logo.

• replace icon lets you select an icon. Use descriptive English keywords to search our database for the perfect icon for your brand.
• size adjusts the size of your icon.
• rotation lets you rotate your icon.
• flip mirrors your icon.

Name

This is your logo name. It's the main text element of your logo.

Text

Controls the look and feel of your logo name.

• edit lets you set the text of your element. Use the pipe character "|" to split up your text in multiple lines.
• font lets you select a font for your text element.
• size sets the text size.
• curve puts your text on a curve. You can use the slider to control the curvature.
• letter spacing adjusts the space between letters.
• margin adjusts the space between the text element and the element next to it.
• lining adjusts the space between multiple lines of text in case of multiline text.
• box makes every line of text the same width by changing the size of the text line in case of multiline text.

Shadow

Adds a shadow to your text element.

• size sets the shadow size of your element. Use the on/off switch to enable or disable the shadow.
• type changes the shadow type. You can select a 2D shadow, a 3D shadow or a shadow with a text cut-out.
• rotation sets the shadow angle, simulating a light direction.
• curve puts your text on a curve. You can use the slider to control the curvature.
• offset adjusts the position of the shadow.
• color sets the shadow color.

Divider

This is a line between your name and your slogan.

Slogan

This is the slogan of your logo. It has almost the same options as the name element.

Line

Controls the design of the divider line.

• length sets the length of the divider line. You can use the on/off switch to enable or disable the divider.
• type you can choose the type of divider line. You can select a straight line, a zigzag line or a wave line.
• height sets the height of the divider line in case of a zigzag or a wave divider.
• detail sets the number of repetitions in case of a zigzag or a wave divider.
• margin adjust the space between the divider line and name and slogan.
• size controls the width of the divider line.