Icon
Icon renders a named glyph from Mosaic's icon set. It sizes through the size variant and inherits color from currentColor. Any glyph can be swapped per name through appearance.icons on MosaicProvider. Mosaic's styling applies to an override just like the built-in glyph — so swapped icons stay visually consistent — and the override also carries the .cl-icon class and data-size attribute for targeting.
Set placement when the icon sits beside text inside a container. It adds no styling of its own; it reflects data-icon="inline-start" or data-icon="inline-end" so the container can react — a Button, for example, tightens its padding on the side the icon sits with :has([data-icon='inline-end']). The values are the CSS logical directions, so they follow the writing mode rather than naming a physical edge. Leave it unset for a standalone icon.
Playground
Props
| Prop | Type | Default | Value |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'md' | |
| name | IconName | — | — |
| placement | 'inline-start' | 'inline-end' | — | — |
| className | string | — | — |
| style | CSSProperties | — | — |
Usage
import { Icon } from '@clerk/ui/mosaic/components/icon';
<Icon
size='md'
name='chevron-right'
/>Examples
Sizes
Names
chevron-rightchevron-leftchevron-downcheckcloseellipsispluslog-outOverriding a glyph
Pass appearance.icons to MosaicProvider to replace a glyph by name. The override is a plain element of any type, not just an svg; Mosaic clones it with the resolved sizing className and data-size, keeping any class the element already had. The replacement only supplies its own content.