Icon

Navigation

Icons are inline SVG in the text colour, hidden from screen readers.

for i in [Icon::Dashboard, Icon::Inbox, Icon::Users, Icon::Bot, Icon::Settings] {
    i.html(out);,
}

Actions

Beside a label they name the action at a glance.

for i in [Icon::Plus, Icon::Download, Icon::Copy, Icon::RefreshCw, Icon::Filter] {
    i.html(out);,
}

Objects

Files, code and money, each a 24 px stroke drawing.

for i in [Icon::File, Icon::Folder, Icon::Code, Icon::Shield, Icon::Wallet] {
    i.html(out);,
}

On the Mac

The same vocabulary drawn by Ocean UI's native face (egui on Metal), as the gallery's snapshot.

Use it

use ocean_ui_core::Icon;
Icon::Search

use ocean_ui_native::{core::Icon, icon, theme};
let ink = theme::color(theme::palette_of(ui.ctx()).text1);
icon::icon(ui, Icon::Search, 16.0, ink);

Cargo feature base of ocean-ui-core, ocean-ui-web and ocean-ui-native; available since 2026-10-29.

Props

Accessibility

• The svg is aria-hidden="true" and focusable="false", so assistive technology skips it.
• The icon is decorative, so put the meaning in words; an icon-only button still needs a label, which becomes its accessible name.
• The stroke takes the current text colour, so it keeps the contrast of the words beside it.

Related

• Button
• Copy button
• Sidebar

Markdown

The same page as Markdown, for an agent or a pull request.

# Icon

One of 38 Lucide stroke drawings as SVG; decoration beside words, never in place of them.

Icon is an enum of named drawings, each one SVG path in a 24 by 24 box, stroked at width 2 with round caps and joins. They are Lucide's drawings under the ISC licence, the same on the Mac and on the web, and the web face draws them inline at 16 px in the colour of the text around them, the native face at the size and tint it is given. Icons are decoration; the words beside them, or the control's label, carry the meaning.

## Use it

Web:

```rust
use ocean_ui_core::Icon;
Icon::Search
```

Native:

```rust
use ocean_ui_native::{core::Icon, icon, theme};
let ink = theme::color(theme::palette_of(ui.ctx()).text1);
icon::icon(ui, Icon::Search, 16.0, ink);
```

Cargo feature `base`; since 2026-10-29.

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `(variant)` | `Icon` | `—` | Which drawing, such as Search, Plus, Copy, ChevronDown, Settings or Terminal; Icon::ALL lists all 38. |
| `(name)` | `&'static str` | `—` | Icon::name() gives the kebab-case key, such as chevron-down, for tests and galleries. |

On the Mac: ![Icon, dark](/ui/native/icons-dark.png) ![Icon, light](/ui/native/icons-light.png)

## Examples

### Navigation

Icons are inline SVG in the text colour, hidden from screen readers.

```rust
for i in [Icon::Dashboard, Icon::Inbox, Icon::Users, Icon::Bot, Icon::Settings] {
    i.html(out);,
}
```

### Actions

Beside a label they name the action at a glance.

```rust
for i in [Icon::Plus, Icon::Download, Icon::Copy, Icon::RefreshCw, Icon::Filter] {
    i.html(out);,
}
```

### Objects

Files, code and money, each a 24 px stroke drawing.

```rust
for i in [Icon::File, Icon::Folder, Icon::Code, Icon::Shield, Icon::Wallet] {
    i.html(out);,
}
```

## Accessibility

- The svg is aria-hidden="true" and focusable="false", so assistive technology skips it.
- The icon is decorative, so put the meaning in words; an icon-only button still needs a label, which becomes its accessible name.
- The stroke takes the current text colour, so it keeps the contrast of the words beside it.

## Related

- [Button](/ui/components/button.md)
- [Copy button](/ui/components/copy.md)
- [Sidebar](/ui/components/sidebar.md)