# Icon

> Original Stance icons as inline SVG that inherit the current text colour.

Category: Media & code · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/icon

Stance ships its own icon set, drawn on a 24px grid with a 1.75 stroke and round joins, with no icon-library dependency. Icons are decorative by default and hidden from assistive technology. Give an icon a `label` only when it stands alone and carries meaning.

## Import

```tsx
import { Icon } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { Icon } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Icon name="signature" size="lg" />
      <Icon name="file-text" size="lg" />
      <Icon name="mail" size="lg" />
      <Icon name="users" size="lg" />
      <Icon name="shield" size="lg" />
    </div>
  );
}
```

### Sizes

```tsx
import { Icon } from '@bindshq/stance-react';

export function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((s) => (
        <Icon key={s} name="pen-nib" size={s} />
      ))}
    </div>
  );
}
```

### Meaningful icons

A standalone status icon needs a label.

```tsx
import { Icon, Text } from '@bindshq/stance-react';

export function Meaningful() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{ color: 'var(--st-color-success-fg)' }}>
        <Icon name="check-circle" size="md" label="Deployed" />
      </span>
      <Text size="sm" as="span">
        Acme Ltd signature
      </Text>
    </div>
  );
}
```

### In a button

```tsx
import { Button, Icon } from '@bindshq/stance-react';

export function InButton() {
  return (
    <Button variant="outline" leadingIcon={<Icon name="upload" />}>
      Upload users
    </Button>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Icon | `name` (required) | `IconName` | None | Icon identifier. See the Icons page for all names. |
| Icon | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number` | `'sm'` | 12, 16, 20, 24, 32px or a number. |
| Icon | `strokeWidth` | `number` | `1.75` | Stroke width on the 24px grid. |
| Icon | `label` | `string` | None | Accessible name; omit for decorative icons. |

## Accessibility

- Without a label, icons get aria-hidden="true" and focusable="false".
- With a label, icons get role="img", aria-label and a <title>.
- Icons use currentColor, so they follow text colour in all themes and in forced-colours mode.

## Guidelines

**Do**

- Pair icons with text for actions.
- Use the same icon for the same concept everywhere.

**Don’t**

- Use an icon alone without a label.

## Related

- https://stanceui.com/components/icon-gallery
- https://stanceui.com/components/icon-button