- Where to find it
- On the composer’s palette, labelled Icon. Drag it onto the canvas to add one.
- Its settings
- 1 of them, in the “Selected Component” section of the Modify drawer.
- Provided by
- RuleCMS, in
@rulecms/source-components-react. Available to every team.
In plain English
The Icon component puts a single symbol on the page: the tick beside a feature in a pricing table, the arrow at the end of a call to action, the little bin next to a delete link. There are just over 1,700 to choose from, all drawn in the same line style so a page built from them looks consistent.
It has exactly one setting, which is the symbol itself. That is deliberate. An icon has no colour and no size of its own — it draws itself in whatever text colour surrounds it and at 24 pixels square, and both are changed on the column, the same way you would change them for a piece of text.
That inheritance is the part worth remembering, because it is what makes icons behave well. Put an icon in a column whose text is white on a dark band and the icon turns white too. Change the section from grey to blue later and every icon inside follows, with nothing to update one by one.
Finding the symbol you want is a search box rather than a long list to scroll. It matches what icons mean as well as what they are called, so "launch" finds the rocket and "trash" finds the bin, which saves guessing at official names.
When you would use it
- A tick or cross in a feature comparison.
- A small symbol beside a heading, a label, or a list item.
- An arrow or chevron at the end of a link.
Its settings
These are the settings this component offers, in the order the Modify drawer lists them. Each has its own page.
| Setting | Label in the drawer | What it does |
|---|---|---|
| Icon | Icon | Which symbol the icon component draws. |
Watch out for
- An icon alone is not a label. It is hidden from screen readers on purpose, so a symbol carrying meaning that is not in the nearby words leaves some visitors with nothing. Pair it with text.
- Colour comes from Text Color on the column, not from the component. If an icon is the wrong colour, the colour is being set — or inherited — somewhere around it.
- Size comes from Width and Height on the column. There is no size setting on the icon itself.
- A new icon shows a placeholder symbol until you pick one, and because the placeholder is a real icon it is easy to leave it there by accident.
Where to go next
- All RuleCMS components
- Attribute Reference — the column and row settings that shape how this component sits on the page: spacing, size, colour, and typography.
- The Composer — the editing surface it lives in.