Bundled icons
gpui-component bundles the icon set below and exposes each one as an
IconName variant. The icons are Lucide
(ISC-licensed) — every bundled SVG carries the class="lucide lucide-…"
marker. Browse the full ~1,600-icon catalog at https://lucide.dev/icons/.
Using a bundled icon
Section titled “Using a bundled icon”All 99 icons here are type-safe IconName variants — no file work needed:
use gpui_component::{Icon, IconName};
Icon::new(IconName::ArrowDown).size_4()Using any other Lucide icon
Section titled “Using any other Lucide icon”The other ~1,500 Lucide icons aren’t bundled, but Icon takes an arbitrary
path, so it’s a one-file drop:
- Grab the SVG from https://lucide.dev/icons/ (or
npm i lucide-static). - Drop it under this repo’s assets (e.g.
resources/icons/my-icon.svg). - Reference it by path:
Icon::default().path("icons/my-icon.svg").size_4()Lucide SVGs use stroke="currentColor", so they inherit theme color and
sizing just like the bundled ones.
The 99 bundled icons
Section titled “The 99 bundled icons”IconName variants are pascal-cased from the filename. A few gpui filenames
are aliases — the file is named differently from the Lucide glyph it draws
(flagged below); the link points at that underlying Lucide icon.
IconName variant | gpui file | Lucide glyph |
|---|---|---|
IconName::ALargeSmall | a-large-small.svg | a-large-small |
IconName::ArrowDown | arrow-down.svg | arrow-down |
IconName::ArrowLeft | arrow-left.svg | arrow-left |
IconName::ArrowRight | arrow-right.svg | arrow-right |
IconName::ArrowUp | arrow-up.svg | arrow-up |
IconName::Asterisk | asterisk.svg | asterisk |
IconName::BatteryCharging | battery-charging.svg | battery-charging |
IconName::BatteryFull | battery-full.svg | battery-full |
IconName::BatteryLow | battery-low.svg | battery-low |
IconName::BatteryMedium | battery-medium.svg | battery-medium |
IconName::BatteryWarning | battery-warning.svg | battery-warning |
IconName::Battery | battery.svg | battery |
IconName::Bell | bell.svg | bell |
IconName::BookOpen | book-open.svg | book-open |
IconName::Bot | bot.svg | bot |
IconName::Building2 | building-2.svg | building-2 |
IconName::Calendar | calendar.svg | calendar |
IconName::CaseSensitive | case-sensitive.svg | case-sensitive |
IconName::ChartPie | chart-pie.svg | chart-pie |
IconName::Check | check.svg | check |
IconName::ChevronDown | chevron-down.svg | chevron-down |
IconName::ChevronLeft | chevron-left.svg | chevron-left |
IconName::ChevronRight | chevron-right.svg | chevron-right |
IconName::ChevronUp | chevron-up.svg | chevron-up |
IconName::ChevronsUpDown | chevrons-up-down.svg | chevrons-up-down |
IconName::CircleCheck | circle-check.svg | circle-check |
IconName::CircleUser | circle-user.svg | circle-user |
IconName::CircleX | circle-x.svg | circle-x |
IconName::Close | close.svg | x (alias) |
IconName::Copy | copy.svg | copy |
IconName::Cpu | cpu.svg | cpu |
IconName::Dash | dash.svg | minus (alias) |
IconName::Delete | delete.svg | delete |
IconName::EllipsisVertical | ellipsis-vertical.svg | ellipsis-vertical |
IconName::Ellipsis | ellipsis.svg | ellipsis |
IconName::ExternalLink | external-link.svg | external-link |
IconName::EyeOff | eye-off.svg | eye-off |
IconName::Eye | eye.svg | eye |
IconName::File | file.svg | file |
IconName::FolderClosed | folder-closed.svg | folder-closed |
IconName::FolderOpen | folder-open.svg | folder-open |
IconName::Folder | folder.svg | folder |
IconName::Frame | frame.svg | frame |
IconName::GalleryVerticalEnd | gallery-vertical-end.svg | gallery-vertical-end |
IconName::Github | github.svg | github |
IconName::Globe | globe.svg | globe |
IconName::HardDrive | hard-drive.svg | hard-drive |
IconName::HeartOff | heart-off.svg | heart-off |
IconName::Heart | heart.svg | heart |
IconName::Inbox | inbox.svg | inbox |
IconName::Info | info.svg | info |
IconName::Inspector | inspector.svg | square-dashed-mouse-pointer (alias) |
IconName::LayoutDashboard | layout-dashboard.svg | layout-dashboard |
IconName::LoaderCircle | loader-circle.svg | loader-circle |
IconName::Loader | loader.svg | loader |
IconName::Map | map.svg | map |
IconName::Maximize | maximize.svg | maximize-2 (alias) |
IconName::MemoryStick | memory-stick.svg | memory-stick |
IconName::Menu | menu.svg | menu |
IconName::Minimize | minimize.svg | minimize-2 (alias) |
IconName::Minus | minus.svg | minus |
IconName::Moon | moon.svg | moon |
IconName::Network | network.svg | network |
IconName::Palette | palette.svg | palette |
IconName::PanelBottomOpen | panel-bottom-open.svg | panel-bottom-open |
IconName::PanelBottom | panel-bottom.svg | panel-bottom |
IconName::PanelLeftClose | panel-left-close.svg | panel-left-close |
IconName::PanelLeftOpen | panel-left-open.svg | panel-left-open |
IconName::PanelLeft | panel-left.svg | panel-left |
IconName::PanelRightClose | panel-right-close.svg | panel-right-close |
IconName::PanelRightOpen | panel-right-open.svg | panel-right-open |
IconName::PanelRight | panel-right.svg | panel-right |
IconName::Pause | pause.svg | pause |
IconName::Play | play.svg | play |
IconName::Plus | plus.svg | plus |
IconName::Redo2 | redo-2.svg | redo-2 |
IconName::Redo | redo.svg | redo |
IconName::Replace | replace.svg | replace |
IconName::ResizeCorner | resize-corner.svg | resize-corner |
IconName::Search | search.svg | search |
IconName::Settings2 | settings-2.svg | settings-2 |
IconName::Settings | settings.svg | settings |
IconName::SortAscending | sort-ascending.svg | chevrons-up-down (alias) |
IconName::SortDescending | sort-descending.svg | chevrons-up-down (alias) |
IconName::SquareTerminal | square-terminal.svg | square-terminal |
IconName::StarFill | star-fill.svg | star (alias) |
IconName::StarOff | star-off.svg | star-off |
IconName::Star | star.svg | star |
IconName::Sun | sun.svg | sun |
IconName::ThumbsDown | thumbs-down.svg | thumbs-down |
IconName::ThumbsUp | thumbs-up.svg | thumbs-up |
IconName::TriangleAlert | triangle-alert.svg | triangle-alert |
IconName::Undo2 | undo-2.svg | undo-2 |
IconName::Undo | undo.svg | undo |
IconName::User | user.svg | user |
IconName::WindowClose | window-close.svg | window-close |
IconName::WindowMaximize | window-maximize.svg | window-maximize |
IconName::WindowMinimize | window-minimize.svg | window-minimize |
IconName::WindowRestore | window-restore.svg | window-restore |
99 icons, from gpui-component’s crates/assets/assets/icons/. If you bump the
gpui-component pin and the set changes, regenerate this list.