Adding 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

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

  • Search for and select Shape

  • Click and drag onto your canvas

  • Double click the element to browse icons and basic shapes

From The Top Menu

  • Navigate to the left side of the top menu

  • Click the dropdown icon beside the Rectangle element shortcut

  • Select the Shape element

  • Click and drag onto your canvas

  • Double click the element to browse icons and basic shapes

As a Section

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

  • Search for and select Shape

  • Click it

  • Press Alt

  • 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

  • Navigate to the left side of the top menu

  • Click the dropdown icon beside the Rectangle element shortcut

  • Open the shape library option

  • Navigate to the 'Project' tab

  • Select Add SVG

  • 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?