Vev's shape elements allow you to add basic icons, shapes, or custom SVGs to your projects.
👍🏽 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.