Redesign and clean up all icons across Zed (#35856)

- [x] Clean up unused and old icons
- [x] Swap SVG for all in-use icons with the redesigned version
- [x] Document guidelines

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-08-08 15:34:36 -03:00 committed by GitHub
parent 530f5075d0
commit 2cde6da5ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
284 changed files with 535 additions and 791 deletions

29
crates/icons/README.md Normal file
View file

@ -0,0 +1,29 @@
# Zed Icons
## Guidelines
Icons are a big part of Zed, and they're how we convey hundreds of actions without relying on labeled buttons.
When introducing a new icon to the set, it's important to ensure it is consistent with the whole set, which follows a few guidelines:
1. The SVG view box should be 16x16.
2. For outlined icons, use a 1.5px stroke width.
3. Not all icons are mathematically aligned; there's quite a bit of optical adjustment. But try to keep the icon within an internal 12x12 bounding box as much as possible while ensuring proper visibility.
4. Use the `filled` and `outlined` terminology when introducing icons that will have the two variants.
5. Icons that are deeply contextual may have the feature context as their name prefix. For example, `ToolWeb`, `ReplPlay`, `DebugStepInto`, etc.
6. Avoid complex layer structure in the icon SVG, like clipping masks and whatnot. When the shape ends up too complex, we recommend running the SVG in [SVGOMG](https://jakearchibald.github.io/svgomg/) to clean it up a bit.
## Sourcing
Most icons are created by sourcing them from [Lucide](https://lucide.dev/).
Then, they're modified, adjusted, cleaned up, and simplified depending on their use and overall fit with Zed.
Sometimes, we may use other sources like [Phosphor](https://phosphoricons.com/), but we also design many of them completely from scratch.
## Contributing
To introduce a new icon, add the `.svg` file in the `assets/icon` directory and then add its corresponding item in the `icons.rs` file within the `crates` directory.
- SVG files in the assets folder follow a snake case name format.
- Icons in the `icons.rs` file follow the pascal case name format.
Ensure you tag a member of Zed's design team so we can adjust and double-check any newly introduced icon.

View file

@ -28,16 +28,12 @@ pub enum IconName {
ArrowCircle,
ArrowDown,
ArrowDown10,
ArrowDownFromLine,
ArrowDownRight,
ArrowLeft,
ArrowRight,
ArrowRightLeft,
ArrowUp,
ArrowUpAlt,
ArrowUpFromLine,
ArrowUpRight,
ArrowUpRightAlt,
AudioOff,
AudioOn,
Backspace,
@ -51,28 +47,22 @@ pub enum IconName {
BoltFilled,
Book,
BookCopy,
BugOff,
CaseSensitive,
Chat,
Check,
CheckDouble,
ChevronDown,
/// This chevron indicates a popover menu.
ChevronDownSmall,
ChevronLeft,
ChevronRight,
ChevronUp,
ChevronUpDown,
Circle,
CircleOff,
CircleHelp,
Close,
Cloud,
CloudDownload,
Code,
Cog,
Command,
Context,
Control,
Copilot,
CopilotDisabled,
@ -93,16 +83,12 @@ pub enum IconName {
DebugIgnoreBreakpoints,
DebugLogBreakpoint,
DebugPause,
DebugRestart,
DebugStepBack,
DebugStepInto,
DebugStepOut,
DebugStepOver,
DebugStop,
Delete,
Diff,
Disconnected,
DocumentText,
Download,
EditorAtom,
EditorCursor,
@ -113,59 +99,50 @@ pub enum IconName {
Ellipsis,
EllipsisVertical,
Envelope,
Equal,
Eraser,
Escape,
Exit,
ExpandDown,
ExpandUp,
ExpandVertical,
ExternalLink,
Eye,
File,
FileCode,
FileCreate,
FileDiff,
FileDoc,
FileGeneric,
FileGit,
FileLock,
FileMarkdown,
FileRust,
FileSearch,
FileText,
FileTextFilled,
FileTextOutlined,
FileToml,
FileTree,
Filter,
Flame,
Folder,
FolderOpen,
FolderX,
FolderSearch,
Font,
FontSize,
FontWeight,
ForwardArrow,
Function,
GenericClose,
GenericMaximize,
GenericMinimize,
GenericRestore,
GitBranch,
GitBranchSmall,
GitBranchAlt,
Github,
Globe,
Hammer,
Hash,
HistoryRerun,
Image,
Indicator,
Info,
InlayHint,
Keyboard,
Layout,
Library,
LightBulb,
LineHeight,
Link,
ListCollapse,
ListTodo,
ListTree,
@ -173,35 +150,28 @@ pub enum IconName {
LoadCircle,
LocationEdit,
LockOutlined,
LspDebug,
LspRestart,
LspStop,
MagnifyingGlass,
MailOpen,
Maximize,
Menu,
MenuAlt,
Mic,
MicMute,
Minimize,
Notepad,
Option,
PageDown,
PageUp,
PanelLeft,
PanelRight,
Pencil,
Person,
PersonCircle,
PhoneIncoming,
Pin,
PlayOutlined,
PlayFilled,
Plus,
PocketKnife,
Power,
Public,
PullRequest,
Quote,
Reader,
RefreshTitle,
Regex,
ReplNeutral,
@ -213,28 +183,18 @@ pub enum IconName {
Return,
RotateCcw,
RotateCw,
Route,
Save,
Scissors,
Screen,
ScrollText,
SearchSelection,
SelectAll,
Send,
Server,
Settings,
SettingsAlt,
ShieldCheck,
Shift,
Slash,
SlashSquare,
Sliders,
SlidersVertical,
Snip,
Space,
Sparkle,
SparkleAlt,
SparkleFilled,
Split,
SplitAlt,
SquareDot,
@ -243,7 +203,6 @@ pub enum IconName {
Star,
StarFilled,
Stop,
StopFilled,
Supermaven,
SupermavenDisabled,
SupermavenError,
@ -279,18 +238,13 @@ pub enum IconName {
TriangleRight,
Undo,
Unpin,
Update,
UserCheck,
UserGroup,
UserRoundPen,
Visible,
Wand,
Warning,
WholeWord,
X,
XCircle,
ZedAssistant,
ZedAssistantFilled,
ZedBurnMode,
ZedBurnModeOn,
ZedMcpCustom,