# Icon

The **Icon** block places a vector icon: static, animated or taken from your own SVG files. This page describes the picker, the motion of animated icons, the alternative text and the size and stroke settings.

## Add an icon

1. In the editor, open the inserter and choose **Icon**. [Add a block](https://lovelyrender.com/documentation/add-block/) details the ways to insert a block.
2. Open the **Styles** tab. The **Icon** panel is below the row of states.
3. Choose a source, search for the icon in the **Search icons…** field or browse the categories, then click the icon. It appears under **Selected Icon**.
4. In the **Settings** tab, fill in the **Alt text** if the icon carries information.

| Source | Content |
| --- | --- |
| **Icons** | The library that ships with the product, more than 1,700 static icons, searched by name, keyword or category. Without a search, the picker shows **Recently used** icons and **Browse by category**. |
| **Animated** | More than 450 icons whose motion is part of the drawing: an arrow that slides or a bell that rings. Same categories and same keywords as the static icons. |
| **Custom** | Your own SVG files. **Manage custom icons…** opens the window where you **Upload SVG**, and search and delete your files. |

The thumbnails in the grid play on hover: the motion you see when you move the pointer over one is the motion your visitor will see.

## Set the motion of an animated icon

By default, an animated icon moves when the visitor puts the pointer on it. As soon as one is chosen, two settings appear under it.

| Setting | Effect | Default value |
| --- | --- | --- |
| **Trigger** | **When visible**, on arrival on screen. **On hover**. **On click** on the block. **When activated**, by an open tab, a displayed slide or another block. | **On hover** |
| **Behavior** | **Play once**, then the icon stays where the motion left it. **Replay** at each trigger. **Infinite**, in a loop. | **Replay** |

![The Icon panel of an Icon block: the animated bell under Chosen icon, Trigger set to On hover, Behavior set to Replay, the Animated source chosen and the Search for an icon field.](https://static.lovelyrender.com/uploads/2026/10/883-doc-blocs-icone.png)

These two settings are those of the **Animations** tab, where the motion appears as an animation in the list. There you also set its duration, its curve, its delay and how it chains with other animations. [Animate a block](https://lovelyrender.com/documentation/animate-block/) describes them.

**Note:** The editor plays the hover, but not the other triggers: to see an icon set to **When visible** or **On click**, preview the page.

A message appears at the right moment in three cases:

- an animated icon placed on the **Hover** state instead of the **Default** state;
- a motion that follows another animation and no longer has its own trigger;
- a motion in a single piece, for which **Replay** and **Infinite** give the same result.

## Settings tab

| Setting | Effect | Default value |
| --- | --- | --- |
| **Alt text** | The name that screen readers announce in place of the drawing. Empty, the icon is decorative and screen readers skip it. | Empty |
| **Rotation** | Rotates the icon. | None |

Once the icon is chosen, a message under the field reminds you that this text is not written in the page as visible text. The drawing takes up the whole block. The text remains the name announced by screen readers.

## Styles tab

The icon is set in the **Default**, **Hover** and **Active** states. The icon itself is chosen per state. The **Icon** style, applied on insertion, sets it to 24 pixels.

| Panel | Purpose |
| --- | --- |
| **Colors** | The color of the drawing and of the background, see [Color a block](https://lovelyrender.com/documentation/color-block/). |
| **Typography** | The size, without font or weight. |
| **Size & Spacing** | A width or a height is that of the drawing. The other side follows its proportions. **Stroke width** thins or thickens the outlines of a line icon: 2 is the stroke of the product’s icons. See [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/). |
| **Borders**, **Effects**, **Transitions** | [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/) |

The block is as tall as its drawing: equal padding on all four sides makes a regular badge. The **Icons** part of the design catalog gives all the icons of the site a look: **Bare**, **Thin line**, **Badge**, **Solid square** or **Outline** ([Adopt a design from the catalog](https://lovelyrender.com/documentation/adopt-catalog-design/)).

## Animations tab

The **Animations** tab holds the motion of an animated icon and any other animation. The **Draw** effect draws the strokes of a static icon from start to end. [Animate a block](https://lovelyrender.com/documentation/animate-block/) describes the effects.

## Accessibility

- Fill in the **Alt text** of an icon alone in a link, or of a pictogram that replaces a word. Leave it empty for a decorative icon.
- A visitor who has asked to reduce animations sees animated icons held still.
- **Infinite** puts permanent motion in the page. Reserve it for an isolated element.

## Limits

- Only icons from the **Animated** source have a motion: a static icon does not become animated.
- Your SVG files stay in **Custom**, whether they move or not.

## See also

- [Button](https://lovelyrender.com/documentation/button-block/)
- [Animate a block](https://lovelyrender.com/documentation/animate-block/)
- [Adopt a design from the catalog](https://lovelyrender.com/documentation/adopt-catalog-design/)