Shapes and icons

Add preset shapes or custom SVGs to your project

Tiril Uggerud avatar
Written by Tiril Uggerud
Updated over a week ago

Vev's shape elements allow you to add basic icons, shapes, or custom SVGs to your projects.

Adding shapes and icons in Vev

Adding Shapes and Icons

From The Add Menu

  1. Open the Add Menu (Shortcut: M)

  2. Search for and select Shape

  3. Click and drag onto your canvas

  4. Double click the element to browse icons and basic shapes

If you want the shape to be added as an entire section simply press alt/option in your keyboard and place the new sections wherever you like.

Tip: Vev's Shapes and Icons come preloaded with the Font Awesome library as SVGs.

Styling Shapes and Icons

Choose from a variety of options to style and customize your shape/icon. You'll find these options in the styles panel as listed below.

  • Spacing top: Add padding to the top of the Shape section in pixels or % to keep spacing between sections

  • Spacing bottom: Add padding to the bottom of the Shape section in pixels or % to keep spacing between sections

  • Width: The width of a Shape section can't be altered, it'll always be set to cover the 100%

  • Height: Set the height of the Shape section in Pixels, % or set it to Auto so that it grows as you add content to it

  • Min H: Sets the minimum amount of height pixels a Shape section can be. A red stippled horizontal line inside your section will reflect the minimum height

  • Clip content: Toggle to hide the content that goes beyond the section's edges

  • Resize to fill vertically: Click to set the section's height to 100%

  • Background: Choose a fill color, gradient color, or background image

  • Color: Choose the color of your shape

  • Padding: add padding to your shape/icon evenly on all sides or mix them

  • Border: Set a border color, opacity, and line weight

  • Border Radius: Curve the radius of the border

  • Effects: Add different types of shadows or blur effects. Learn more about effects

  • Opacity: Set the opacity of your shape/icon

Uploading a Custom SVG

You can add a new shape in format .svg at any time by pulling the shape library and clicking on the upload button as shown below:

Tip: Most design tools will allow you to export an element in various formats. This is usually found under a dropdown labeled ' Format' when exporting โ€” make sure to select SVG.

Did this answer your question?