From 2d9cd2ac8888a144ef41e59c9820ffbecee66ed1 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Sat, 9 Aug 2025 22:12:23 -0300 Subject: [PATCH] Update and refine some icons (#35938) Follow up to https://github.com/zed-industries/zed/pull/35856. Release Notes: - N/A --- assets/icons/arrow_circle.svg | 8 ++++---- assets/icons/blocks.svg | 4 +++- assets/icons/folder_search.svg | 2 +- assets/icons/maximize.svg | 4 ++-- assets/icons/minimize.svg | 8 ++++---- assets/icons/scissors.svg | 4 +++- crates/icons/README.md | 18 +++++++++--------- 7 files changed, 26 insertions(+), 22 deletions(-) diff --git a/assets/icons/arrow_circle.svg b/assets/icons/arrow_circle.svg index 790428702e..76363c6270 100644 --- a/assets/icons/arrow_circle.svg +++ b/assets/icons/arrow_circle.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/assets/icons/blocks.svg b/assets/icons/blocks.svg index 128ca84ef1..e1690e2642 100644 --- a/assets/icons/blocks.svg +++ b/assets/icons/blocks.svg @@ -1 +1,3 @@ - + + + diff --git a/assets/icons/folder_search.svg b/assets/icons/folder_search.svg index 15b0705dd6..d1bc537c98 100644 --- a/assets/icons/folder_search.svg +++ b/assets/icons/folder_search.svg @@ -1,5 +1,5 @@ - + diff --git a/assets/icons/maximize.svg b/assets/icons/maximize.svg index c51b71aaf0..ee03a2c021 100644 --- a/assets/icons/maximize.svg +++ b/assets/icons/maximize.svg @@ -1,6 +1,6 @@ - - + + diff --git a/assets/icons/minimize.svg b/assets/icons/minimize.svg index 97d4699687..ea825f054e 100644 --- a/assets/icons/minimize.svg +++ b/assets/icons/minimize.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/assets/icons/scissors.svg b/assets/icons/scissors.svg index 89d246841e..430293f913 100644 --- a/assets/icons/scissors.svg +++ b/assets/icons/scissors.svg @@ -1 +1,3 @@ - + + + diff --git a/crates/icons/README.md b/crates/icons/README.md index 5fbd6d4948..71bc5c8545 100644 --- a/crates/icons/README.md +++ b/crates/icons/README.md @@ -3,27 +3,27 @@ ## 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: +When introducing a new icon, it's important to ensure consistency with the existing set, which follows these 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. +3. Not all icons are mathematically aligned; there's quite a bit of optical adjustment. However, 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 these 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. +6. Avoid complex layer structures in the icon SVG, like clipping masks and similar elements. When the shape becomes too complex, we recommend running the SVG through [SVGOMG](https://jakearchibald.github.io/svgomg/) to clean it up. ## 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. +Sometimes, we may use other sources like [Phosphor](https://phosphoricons.com/), but we also design many icons 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. +To introduce a new icon, add the `.svg` file to the `assets/icon` directory and then add its corresponding item to 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. +- SVG files in the assets folder follow a snake_case name format. +- Icons in the `icons.rs` file follow the PascalCase name format. -Ensure you tag a member of Zed's design team so we can adjust and double-check any newly introduced icon. +Make sure to tag a member of Zed's design team so we can review and adjust any newly introduced icon.