The icons element in Instant allows you to add scalable vector icons to your layouts. Choose from multiple icon libraries and customize their appearance to match your design. This guide covers inserting icons, selecting from libraries, and styling options.
Adding an Icon to the Canvas
Step 1: Open the Insert Panel
Navigate to the Insert panel in the left sidebar.
Step 2: Find the Icon Element
Hover over the Image header. The popover will display the Icon element.
Step 3: Drag to Canvas
Drag the icon element onto your canvas. A default icon will be inserted.
Selecting an Icon
With the icon element selected, access settings in the right sidebar under the Icon header.
Icon Libraries
Click on the icon selector to open the icon popover. Choose from available libraries:
Library | Contents |
General | Standard icons for common UI elements and actions |
Payment Icons | Credit card, payment method, and transaction icons |
Icon Types
For icons in the General library, select a type to change the icon style:
Type | Description |
Thin | Lightweight, minimal stroke |
Light | Slightly heavier than thin |
Regular | Standard stroke weight |
Bold | Heavier, more prominent stroke |
Fill | Solid filled icons |
Duotone | Two-tone styled icons |
Search
Use the search field below the type selector to quickly find icons by name.
Browsing
Scroll through all available icons in the selected library below the search field.
Styling Icons
Color
Set the icon color using the color picker in the right sidebar.
Size
Under the Size header, configure the icon dimensions:
Option | Description |
Width | Set the icon width |
Height | Set the icon height |
Size Units
Unit | Behavior |
Fill | Uses fractional units to fill available space |
Fit | Sizes to fit the content |
Fixed | Set a specific pixel value |
Relative | Size as a percentage of parent container |
Spacing
Define spacing around the icon to control its positioning within the layout.
Additional Styling
Option | Description |
Rotation | Rotate the icon by a specified degree |
Opacity | Adjust the icon transparency |
Quick Reference
Task | Location |
Insert icon | Insert panel → Image → Icon |
Select icon | Right sidebar → Icon → Click selector |
Change library | Icon popover → Library tabs |
Change type | Icon popover → Type selector |
Search icons | Icon popover → Search field |
Set color | Right sidebar → Icon → Color |
Adjust size | Right sidebar → Size → Width/Height |
Add rotation | Right sidebar → Style → Rotation |
Set opacity | Right sidebar → Style → Opacity |
Available Options
Category | Options |
Libraries | General, Payment Icons |
Types | Thin, Light, Regular, Bold, Fill, Duotone |
Size Units | Fill, Fit, Fixed, Relative |
Styling | Color, Rotation, Opacity, Spacing |