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:
parent
530f5075d0
commit
2cde6da5ff
284 changed files with 535 additions and 791 deletions
29
crates/icons/README.md
Normal file
29
crates/icons/README.md
Normal 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.
|
|
@ -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,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue