Icon
One icon from the built-in icon libraries or your own SVG.
The Icon widget shows a single icon, on its own or inside a circle, rounded square or square. Pick from thousands of icons in the built-in libraries (Lucide, Font Awesome, Phosphor, Bootstrap, Feather, Heroicons and Themify), your own icon sets, or upload an SVG. The icon can be a link.
Add an icon
Insert it
Open Insert in the left panel, find Icon under Basic (or type
iconin Search widgets) and click it or drag it onto the canvas.Pick the icon
Click the Icon field. Choose a library tab, search by name, and click an icon. Upload an SVG uses your own file.
Choose a view
Keep Default for the icon alone, or pick Stacked (on a filled shape) or Framed (inside an outline) and a Shape.
Position and size it
Alignment places the icon left, center or right in its container. Set the Size and colors on the Design tab.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). The Link supports dynamic tags (see Dynamic tags).
Content tab
| Setting | What it does |
|---|---|
| Icon | The icon. Pick one from the libraries (Lucide, Font Awesome, Phosphor, Bootstrap, Feather, Heroicons, Themify and your own icon sets), or upload an SVG. |
| View | Default shows the icon alone, Stacked puts it on a filled shape, Framed inside an outlined shape. Options: Default, Stacked, Framed. |
| Shape | The shape behind or around the icon. Options: Circle, Rounded, Square. Default: Circle. Shown when View is not Default. |
| Link | Makes the icon a link. Supports dynamic tags. |
| Accessible label | Name of the icon for screen readers, such as “Call us”. Needed when the icon is a link; leave empty for a decorative icon. |
| Alignment | Positions the icon left, center or right in its container. Options: Left, Center, Right. Per device. |
Design tab
| Setting | What it does |
|---|---|
| Normal › Icon color | Color of the icon. |
| Normal › Shape color | Color of the shape (the fill when stacked, the outline when framed). Shown when View is not Default. |
| Hover › Icon color | Color of the icon on hover. |
| Hover › Shape color | Color of the shape on hover. Shown when View is not Default. |
| Size | Size of the icon. Per device. |
| Padding | Space between the icon and the edge of its shape. Shown when View is not Default. Per device. |
| Stroke width | Line thickness of outline icons (such as Lucide). |
| Rotate | Rotates the icon. |
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Name linked icons. An icon link has no visible text, so fill in Accessible label (for example “Call the studio”). Leave it empty for purely decorative icons.
- Your own icon sets. Upload IcoMoon or Fontello sets, or SVG files, in Urmi → Design System → Custom icons; they appear under Custom in every icon picker. See Custom icons.
- Consistent line weight. Outline icons such as Lucide take a Stroke width; use the same value across the site.
- Icon with text? Use Icon Box for an icon with a title and text, or Icon List for a list.