Mushilu-San UI Icon
A set of built-in outline icons, sized and coloured with the surrounding text.
Selector: mui-icon
import { Icon } from '@mushilu-san/ui/primitives';Loading example…
Overview
currentColor, so it takes the colour of its parent unless color is set.
label is decorative and hidden from assistive technology. Set label when the icon carries meaning on its own, and the icon gets role="img".
When to use
Supporting a text label, such as a mail icon next to an email address. Icon-only controls, where the icon is wrapped in a button that has its own accessible name.
When not to use
A decorative picture or illustration. Use an image. An icon with no text and no label. The meaning is lost for screen reader users.
Examples
Labelled and mirrored
mirror so they point the right way in RTL.
Loading example…
Guidelines
Do
Use mirrorfor arrows and chevrons that indicate direction.Put a visible text label next to an icon whenever possible.
Don't
Do not use mirroron icons that are not directional, such as a search or a star icon.Do not use labelon an icon inside a button that already has a name. The name would be read twice.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host, no label | — | aria-hidden="true". |
host, with label | img | aria-label is set from label. |
An icon is not focusable. For an icon-only action, use a Button with an aria-labelon the button.
API
Icon
| Name | Type | Default | Description |
|---|---|---|---|
name | 'arrow-left' | 'arrow-right' | 'bell' | 'calendar' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'copy' | 'download' | 'edit' | 'external-link' | 'eye' | 'eye-off' | 'filter' | 'heart' | 'home' | 'info' | 'loading' | 'mail' | 'map-pin' | 'menu' | 'minus' | 'more-horizontal' | 'more-vertical' | 'phone' | 'plus' | 'search' | 'settings' | 'star' | 'trash' | 'upload' | 'user' | 'x' | — | Name of the built-in icon to draw. |
size | 'sm' | 'md' | 'lg' | 'xs' | 'xl' | 'md' | Icon size: `xs` (12px) to `xl` (32px). Default `md` (20px). |
color | 'primary' | 'inherit' | 'muted' | 'danger' | 'success' | 'warning' | 'inherit' | Icon colour from the semantic palette. `inherit` uses the surrounding text colour. |
label | string | undefined | — | Accessible name. When set the icon is announced as an image; when empty it is hidden from assistive technology. |
mirror | boolean | false | Flip horizontally in RTL. Use for directional icons (chevrons, arrows). Accepts attribute presence, e.g. <… mirror>. |
CSS parts
::part(root)
Tokens
--mui-color-text--mui-color-primary--mui-color-danger--mui-color-success--mui-color-warning--mui-color-text-muted