Using the Wix Harmony Editor

Working with media elements

Wix Harmony Editor: Working With Vector Art, Shapes, and Icons

Add beautiful vector art, shapes, and icons to express your style. These graphics are digital illustrations (SVGs) that stay sharp at any size, so your design always looks stunning. Choose from the hundreds of free options available at Wix, or upload your own.

Notes:

In the Graphics section of the Add panel, you can find vector art, shapes, icons, and stickers. Stickers are image files you can add to your site, while the rest are SVGs, so you can edit them differently .
Some icons are sourced from third-party open-sourced libraries such as Tabler Icons (MIT) and Phosphor Icons (MIT)

Adding vector art, shapes, and icons

You can use vector art, shapes, and icons to decorate your site, or as an appealing call-to-action. You can either choose from the hundreds of free options available from Wix, or you can upload your own.

To add vector art, shapes, and icons:

Go to your editor.
Click + Add at the top left of the editor.
Select Elements.
Click the Graphics icon
on the left.
Click any element under Vector art, Basic shapes, or Icons.
Tip: Access many more free options by clicking See All.
Click or drag your chosen vector art onto the page.

A screenshot of the Graphics category in the Add panel.

Want to upload your own SVG?

Click Upload at the top of the panel to add your own media to your site.

Designing vector art, shapes, and icons

Customize vector art, shapes, and icons on your site including the colors, opacity, and shadow, so it complements your design.

To customize the design:

Go to your editor.
Click the relevant element and choose what you want to customize:

Customize its colors

Click Change Colors on the action bar.
Click a color to change it and drag the slider to adjust its opacity.
Note: If the vector art has over 8 colors and has gradients, you can only control the opacity of the entire design.

Adjust its design

Click the All design options icon
on the action bar.
Design the element:
- Fill colors
  : Change the color(s) of your element, choosing one of your brand colors or a custom color. You can also adjust the element's opacity.
- Borders
  : Define the borders of your element so it stands out, choosing a color, width and style. Click the Edit all borders icon
  to design them all at once.
- Shadow
  : Apply inner and outer shadow to give the element an interesting 3D effect, setting the position, blurriness, color and more.
- Layout
  : Flip the element horizontally or vertically.

Note: The available design settings depend on the element you're designing (vector art, basic shape or icon).

Add an animation

Click the Animation icon
on the action bar.
Select an animation from the available options.
Customize the animation.

A screenshot of the vector design options.

Note:

The available customization options depend on whether the vector art features a single color, multiple colors, or a grayscale palette.
When uploading your SVG file, we analyze its colors and classify it either as a shape element or a vector art element. For instance, SVG files that only show a single color will appear as a 'shape' in the editor. If we are not able to identify the colors in your SVG file, you may not be able to customize its colors in the editor.

Adjusting the settings of basic shapes and vector art

Adjust how these elements appear and function on your site. You can update their size and layout, add a link to turn the element into a button or call-to-action, and set accessibility options to make sure everyone can enjoy your site’s content.

To adjust the settings:

Go to your editor.
Select the relevant element.
Click the Settings icon
on the action bar.
Choose what to do next:
- Resize Mode: Choose how the element fits on the page: Fit or Stretch.
- Links to: Add a link to the element.
- Accessibility: Enter a short description of what you can see in this vector art or basic shape, to help search engines and accessibility tools.