2cde6da5ff
- [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 |
||
|---|---|---|
| .. | ||
| src | ||
| Cargo.toml | ||
| LICENSE-GPL | ||
| README.md | ||
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:
- The SVG view box should be 16x16.
- For outlined icons, use a 1.5px stroke width.
- 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.
- Use the
filledandoutlinedterminology when introducing icons that will have the two variants. - Icons that are deeply contextual may have the feature context as their name prefix. For example,
ToolWeb,ReplPlay,DebugStepInto, etc. - 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 to clean it up a bit.
Sourcing
Most icons are created by sourcing them from Lucide. 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, 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.rsfile 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.