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. From the top menu bar, click on 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

From The Top Menu

  1. Navigate to the left side of the top menu

  2. Click the dropdown icon beside the Rectangle element shortcut

  3. Select the Shape element

  4. Click and drag onto your canvas

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

As a Section

  1. From the top menu bar, click on the Add Menu (Shortcut: M)

  2. Search for and select Shape

  3. Click it

  4. Press Alt

  5. Click where it says Add section here

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

  1. Navigate to the left side of the top menu

  2. Click the dropdown icon beside the Rectangle element shortcut

  3. Open the shape library option

  4. Navigate to the 'Project' tab

  5. Select Add SVG

  6. Upload your file

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?