Icons

Register the assets

HeroGpuiAssets embeds the herogpui/icons/*.svg files used by checkmarks, chevrons, clear buttons, and other built-in chrome, plus the Lucide set below. Pass it to with_assets before you run the app:

1
2
3application()
    .with_assets(HeroGpuiAssets)
    .run(|cx| { /* open windows */ });

If your app already has an asset source, wrap it so both sets resolve. Components keep working, and your own paths stay available:

1
2
3application()
    .with_assets(HeroGpuiAssets::with_fallback(MyAppAssets))
    .run(|cx| { /* both icon sets resolve */ });

Draw an icon

Paths live on herogpui::prelude::icons. Size and color are GPUI style methods — icons follow the theme when you read cx.colors():

1
2
3
4
5
6
7use herogpui::prelude::{icons, ActiveTheme};
use herogpui::{px, svg};

svg()
    .size(px(16.))
    .path(icons::PLUS)
    .text_color(cx.colors().foreground)

Put the svg ahead of a label when you compose a Button. Icon-only buttons use is_icon_only(true) so the control stays square.

Lucide icons

IconName names a curated set of 245 icons from Lucide 1.31.0, embedded in the crate and served by HeroGpuiAssets under herogpui/icons/lucide/ with no extra setup. Each variant is the Lucide name in PascalCase (circle-check is IconName::CircleCheck), and Icon draws one:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16use herogpui::prelude::*;
use herogpui::px;

// 16px in the theme foreground unless told otherwise.
Icon::new(IconName::Search)
Icon::new(IconName::Heart).size(px(24.)).color(cx.colors().danger.color)

// A size step (the Sizable trait: Xs 12, Sm 14, Md 16, Lg 20, Xl 24px).
Icon::new(IconName::Folder).size(IconSize::Lg)

// Lucide's strokeWidth and absoluteStrokeWidth.
Icon::new(IconName::Star).stroke_width(1.5)
Icon::new(IconName::Star).size(px(48.)).stroke_width(1.5).absolute_stroke_width(true)

// Builders that take an icon path take a name too.
TreeItem::new("src", "Sources").icon(IconName::Folder)

GPUI paints an SVG as one single-colour mask, so a stroke width is a different asset: stroke_width draws IconName::path_with_stroke_width(w), which HeroGpuiAssets serves as the same file with its stroke-width rewritten, rasterised once per width and size. The gallery's Icons page lists every name with a search box.

An icon is decorative and reports no accessibility node, as lucide-react marks its svg aria-hidden: name the control that holds it. Lucide is ISC-licensed (the Feather-derived icons are MIT); the license ships beside the SVGs and is attributed in NOTICE.