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
- In the editor, open the inserter and choose Icon. Add a block details the ways to insert a block.
- Open the Styles tab. The Icon panel is below the row of states.
- 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.
- 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 |
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 describes them.
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. |
| 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. |
| Borders, Effects, Transitions | Set size, borders and 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).
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 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.