Start on icon browser UI.

assets/icons_2/11/arrow_left-1.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 2.5L9.5 5.5M9.5 5.5L6.5 8.5M9.5 5.5L2 5.5" stroke="black" stroke-linecap="square"/>
+</svg>

assets/icons_2/11/arrow_left.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 8.5L1.5 5.5M1.5 5.5L4.5 2.5M1.5 5.5H9" stroke="black" stroke-linecap="square"/>
+</svg>

assets/icons_2/11/arrow_right.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 2.5L9.5 5.5M9.5 5.5L6.5 8.5M9.5 5.5L2 5.5" stroke="black" stroke-linecap="square"/>
+</svg>

assets/icons_2/11/chevron_down.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 4.5L5.5 7.5L2.5 4.5" stroke="black" stroke-linecap="square"/>
+</svg>

assets/icons_2/11/chevron_left.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 8.5L3.5 5.5L6.5 2.5" stroke="black" stroke-linecap="square"/>
+</svg>

assets/icons_2/11/chevron_right.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 2.5L7.5 5.5L4.5 8.5" stroke="black" stroke-linecap="square"/>
+</svg>

assets/icons_2/11/chevron_up.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 6.5L5.5 3.5L8.5 6.5" stroke="black" stroke-linecap="square"/>
+</svg>

assets/icons_2/11/desktop_display.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 7.5H2.25C1.83579 7.5 1.5 7.16421 1.5 6.75V2.25C1.5 1.83579 1.83579 1.5 2.25 1.5H8.75C9.16421 1.5 9.5 1.83579 9.5 2.25V6.75C9.5 7.16421 9.16421 7.5 8.75 7.5H5.5ZM5.5 7.5V9.5M5.5 9.5H3M5.5 9.5H8" stroke="black"/>
+</svg>

assets/icons_2/11/file.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 1.5H5.64872C5.8713 1.5 6.08239 1.59887 6.22488 1.76986L8.32617 4.2914C8.43849 4.42619 8.5 4.59609 8.5 4.77154V5.5M5.5 1.5H3.25C2.83579 1.5 2.5 1.83579 2.5 2.25V8.75C2.5 9.16421 2.83579 9.5 3.25 9.5H7.75C8.16421 9.5 8.5 9.16421 8.5 8.75V5.5M5.5 1.5V4.75C5.5 5.16421 5.83579 5.5 6.25 5.5H8.5" stroke="black"/>
+</svg>

assets/icons_2/11/folder.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.75 9.5H9.25C9.38807 9.5 9.5 9.38807 9.5 9.25V3.75C9.5 3.61193 9.38807 3.5 9.25 3.5H5.60355C5.53725 3.5 5.47366 3.47366 5.42678 3.42678L4.57322 2.57322C4.52634 2.52634 4.46275 2.5 4.39645 2.5H1.75C1.61193 2.5 1.5 2.61193 1.5 2.75V9.25C1.5 9.38807 1.61193 9.5 1.75 9.5Z" stroke="black"/>
+</svg>

assets/icons_2/11/x_mark.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 2.5L5.5 5.5M8.5 8.5L5.5 5.5M5.5 5.5L2.5 8.5M5.5 5.5L8.5 2.5" stroke="black"/>
+</svg>

assets/icons_2/15/arrow_left-1.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 3.5L12.25 7.5M12.25 7.5L8.5 11.5M12.25 7.5L2.75 7.5" stroke="black" stroke-linecap="square"/>
+</svg>

assets/icons_2/15/arrow_left.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 11.5L2.75 7.5M2.75 7.5L6.5 3.5M2.75 7.5H12.25" stroke="black" stroke-linecap="square"/>
+</svg>

assets/icons_2/15/arrow_right.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 3.5L12.25 7.5M12.25 7.5L8.5 11.5M12.25 7.5L2.75 7.5" stroke="black" stroke-linecap="square"/>
+</svg>

assets/icons_2/15/chevron_down.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 6L7.5 9.5L4 6" stroke="black"/>
+</svg>

assets/icons_2/15/chevron_left.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 11L5.5 7.5L9 4" stroke="black"/>
+</svg>

assets/icons_2/15/chevron_right.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 4L9.5 7.5L6 11" stroke="black"/>
+</svg>

assets/icons_2/15/chevron_up.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 9L7.5 5.5L11 9" stroke="black"/>
+</svg>

assets/icons_2/15/desktop_display.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 11.5H2.25C1.83579 11.5 1.5 11.1642 1.5 10.75V3.25C1.5 2.83579 1.83579 2.5 2.25 2.5H12.75C13.1642 2.5 13.5 2.83579 13.5 3.25V10.75C13.5 11.1642 13.1642 11.5 12.75 11.5H7.5ZM7.5 11.5V13.5M7.5 13.5H4M7.5 13.5H11" stroke="black"/>
+</svg>

assets/icons_2/15/file.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 11.75V3.25C3.5 2.83579 3.83579 2.5 4.25 2.5H7.68934C7.88825 2.5 8.07902 2.57902 8.21967 2.71967L11.2803 5.78033C11.421 5.92098 11.5 6.11175 11.5 6.31066V11.75C11.5 12.1642 11.1642 12.5 10.75 12.5H4.25C3.83579 12.5 3.5 12.1642 3.5 11.75Z" stroke="black"/>
+<path d="M7.5 2.5L7.5 5.75C7.5 6.16421 7.83579 6.5 8.25 6.5H11.5" stroke="black"/>
+</svg>

assets/icons_2/15/folder.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.75 12.5H12.25C12.9404 12.5 13.5 11.9404 13.5 11.25V5.25C13.5 4.83579 13.1642 4.5 12.75 4.5H8.76309C8.59278 4.5 8.42755 4.44204 8.29456 4.33565L6.20544 2.66435C6.07245 2.55796 5.90722 2.5 5.73691 2.5H2.25C1.83579 2.5 1.5 2.83579 1.5 3.25V11.25C1.5 11.9404 2.05964 12.5 2.75 12.5Z" stroke="black"/>
+</svg>

assets/icons_2/15/x_mark.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L7.5 7.5M11 11L7.5 7.5M7.5 7.5L4 11M7.5 7.5L11 4" stroke="black"/>
+</svg>

crates/assets/src/assets.rs

@@ -8,6 +8,7 @@ use rust_embed::RustEmbed;
 #[folder = "../../assets"]
 #[include = "fonts/**/*"]
 #[include = "icons/**/*"]
+#[include = "icons_2/**/*"]
 #[include = "images/**/*"]
 #[include = "themes/**/*"]
 #[exclude = "themes/src/*"]

crates/storybook/src/assets.rs

@@ -8,6 +8,7 @@ use rust_embed::RustEmbed;
 #[folder = "../../assets"]
 #[include = "fonts/**/*"]
 #[include = "icons/**/*"]
+#[include = "icons_2/**/*"]
 #[include = "images/**/*"]
 #[include = "themes/**/*"]
 #[include = "sounds/**/*"]

crates/storybook/src/story_selector.rs

@@ -24,6 +24,7 @@ pub enum ComponentStory {
     Disclosure,
     Focus,
     Icon,
+    Icon2,
     IconButton,
     Keybinding,
     Label,
@@ -77,6 +78,7 @@ impl ComponentStory {
             Self::ViewportUnits => cx.new_view(|_| crate::stories::ViewportUnitsStory).into(),
             Self::WithRemSize => cx.new_view(|_| crate::stories::WithRemSizeStory).into(),
             Self::Vector => cx.new_view(|_| ui::VectorStory).into(),
+            Self::Icon2 => cx.new_view(|_| ui::Icon2Story).into(),
         }
     }
 }

crates/ui/src/components.rs

@@ -7,6 +7,7 @@ mod divider;
 mod dropdown_menu;
 mod facepile;
 mod icon;
+pub mod icon_2;
 mod image;
 mod indicator;
 mod keybinding;
@@ -57,6 +58,8 @@ pub use tab_bar::*;
 pub use tool_strip::*;
 pub use tooltip::*;
 
+#[cfg(feature = "stories")]
+pub use icon_2::story::*;
 #[cfg(feature = "stories")]
 pub use image::story::*;
 #[cfg(feature = "stories")]

crates/ui/src/components/icon_2.rs

@@ -0,0 +1,298 @@
+use gpui::{svg, Hsla, IntoElement};
+use serde::{Deserialize, Serialize};
+use strum::{Display, EnumIter, EnumString, IntoStaticStr};
+use ui_macros::DerivePathStr;
+
+use crate::prelude::*;
+
+const ICON_2_SIZE: f32 = 0.9375; // 15px @ 16px/rem
+const SMALL_ICON_2_SIZE: f32 = 0.6875; // 11px @ 16px/rem
+
+#[derive(
+    Display,
+    Debug,
+    PartialEq,
+    Copy,
+    Clone,
+    EnumIter,
+    EnumString,
+    IntoStaticStr,
+    Serialize,
+    Deserialize,
+    DerivePathStr,
+)]
+#[strum(serialize_all = "snake_case")]
+#[path_str(prefix = "icons_2/15", suffix = ".svg")]
+pub enum IconName2 {
+    ArrowLeft,
+    ArrowRight,
+    ChevronDown,
+    ChevronLeft,
+    ChevronRight,
+    ChevronUp,
+    DesktopDisplay,
+    File,
+    Folder,
+    XMark,
+}
+
+#[derive(IntoElement)]
+pub struct Icon2 {
+    icon: IconName2,
+    color: Hsla,
+}
+
+impl Icon2 {
+    pub fn new(cx: &WindowContext, icon: IconName2) -> Self {
+        Self {
+            icon,
+            color: Color::default().color(cx),
+        }
+    }
+
+    pub fn color(mut self, color: Hsla) -> Self {
+        self.color = color;
+        self
+    }
+}
+
+impl RenderOnce for Icon2 {
+    fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
+        svg()
+            .size(rems(ICON_2_SIZE))
+            .flex_none()
+            .path(self.icon.path())
+            .text_color(self.color)
+    }
+}
+
+#[derive(
+    Display,
+    Debug,
+    PartialEq,
+    Copy,
+    Clone,
+    EnumIter,
+    EnumString,
+    IntoStaticStr,
+    Serialize,
+    Deserialize,
+    DerivePathStr,
+)]
+#[strum(serialize_all = "snake_case")]
+#[path_str(prefix = "icons_2/11", suffix = ".svg")]
+pub enum SmallIconName2 {
+    ArrowLeft,
+    ArrowRight,
+    ChevronDown,
+    ChevronLeft,
+    ChevronRight,
+    ChevronUp,
+    DesktopDisplay,
+    File,
+    Folder,
+    XMark,
+}
+
+#[derive(IntoElement)]
+pub struct SmallIcon2 {
+    icon: SmallIconName2,
+    color: Hsla,
+}
+
+impl SmallIcon2 {
+    pub fn new(cx: &WindowContext, icon: SmallIconName2) -> Self {
+        Self {
+            icon,
+            color: Color::default().color(cx),
+        }
+    }
+
+    pub fn color(mut self, color: Hsla) -> Self {
+        self.color = color;
+        self
+    }
+}
+
+impl RenderOnce for SmallIcon2 {
+    fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
+        svg()
+            .size(rems(SMALL_ICON_2_SIZE))
+            .flex_none()
+            .path(self.icon.path())
+            .text_color(self.color)
+    }
+}
+
+#[cfg(feature = "stories")]
+pub mod story {
+    use gpui::Render;
+    use story::Story;
+    use strum::IntoEnumIterator;
+
+    use crate::prelude::*;
+
+    use super::{Icon2, IconName2, SmallIcon2, SmallIconName2};
+
+    pub struct Icon2Story;
+
+    impl Render for Icon2Story {
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+            let icons = IconName2::iter().map(|icon| {
+                div()
+                    // .bg(cx.theme().colors().surface_background)
+                    .p_2()
+                    .rounded_md()
+                    .border_1()
+                    .border_color(cx.theme().colors().border)
+                    .child(Icon2::new(cx, icon))
+                // .child(icon.to_string())
+            });
+            let small_icons = SmallIconName2::iter().map(|icon| {
+                v_flex()
+                    .gap_0p5()
+                    .text_xs()
+                    .text_color(cx.theme().colors().text_muted)
+                    .child(SmallIcon2::new(cx, icon))
+                // .child(icon.to_string())
+            });
+
+            let layout = Story::container()
+                .text_color(cx.theme().colors().text)
+                .h_flex()
+                .child(
+                    // Controls
+                    v_flex()
+                        .w_64()
+                        .h_full()
+                        .bg(cx.theme().colors().surface_background)
+                        .child(
+                            div()
+                                .p_4()
+                                .text_color(cx.theme().colors().text)
+                                .child("Icons"),
+                        ),
+                )
+                .child(
+                    div()
+                        .flex_none()
+                        .h_full()
+                        .w_px()
+                        .bg(cx.theme().colors().border),
+                )
+                .child(
+                    // Icons
+                    v_flex()
+                        .h_full()
+                        .p_4()
+                        .gap_4()
+                        .flex_grow()
+                        .min_w_56()
+                        .max_w(rems(48.))
+                        .bg(cx.theme().colors().background)
+                        .child(
+                            div()
+                                .text_sm()
+                                .text_color(cx.theme().colors().text_placeholder)
+                                .child("Future filter input"),
+                        )
+                        .child(
+                            h_flex()
+                                .flex_wrap()
+                                .gap_4()
+                                .children(icons.clone())
+                                .children(icons.clone())
+                                .children(icons.clone())
+                                .children(icons.clone())
+                                .children(icons.clone())
+                                .children(icons.clone())
+                                .children(icons.clone())
+                                .children(icons.clone())
+                                .children(icons),
+                        ),
+                )
+                .child(
+                    div()
+                        .flex_none()
+                        .h_full()
+                        .w_px()
+                        .bg(cx.theme().colors().border),
+                )
+                .child(
+                    // Icon Preview
+                    v_flex()
+                        .bg(cx.theme().colors().elevated_surface_background)
+                        .h_full()
+                        .flex_grow()
+                        .min_w_56()
+                        .p_4()
+                        .gap_4()
+                        .child("Nothing Selected"),
+                );
+
+            // Story::container().child(
+            //     Story::section()
+            //         .max_w(rems(48.))
+            //         .gap_3()
+            //         .child(
+            //             Story::section_title().child("Icons").child(
+            //                 h_flex()
+            //                     .flex_wrap()
+            //                     .gap_3()
+            //                     .p_3()
+            //                     .bg(cx.theme().colors().background)
+            //                     .children(icons),
+            //             ),
+            //         )
+            //         .child(Story::divider())
+            //         .child(
+            //             Story::section_title().child("Small Icons").child(
+            //                 h_flex()
+            //                     .p_3()
+            //                     .bg(cx.theme().colors().background)
+            //                     .flex_wrap()
+            //                     .gap_3()
+            //                     .children(small_icons),
+            //             ),
+            //         )
+            //         .child(Story::divider())
+            //         .child(
+            //             Story::section_title().child("Examples").child(
+            //                 v_flex().gap_2().child(
+            //                     h_flex()
+            //                         .gap_1()
+            //                         .px_1p5()
+            //                         .py_1()
+            //                         .bg(cx.theme().colors().element_background)
+            //                         .flex_initial()
+            //                         .min_w(px(1.))
+            //                         .child(SmallIcon2::new(cx, SmallIconName2::XMark))
+            //                         .child(
+            //                             h_flex()
+            //                                 .gap_1p5()
+            //                                 .text_size(px(15.))
+            //                                 .text_color(Color::Default.color(cx))
+            //                                 .font_ui(cx)
+            //                                 .line_height(px(15.))
+            //                                 .child("Delete"),
+            //                         ),
+            //                 ),
+            //             ),
+            //         ),
+            // )
+
+            layout
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn icon_2_path() {
+        assert_eq!(SmallIconName2::XMark.path(), "icons_2/11/x_mark.svg");
+        assert_eq!(IconName2::XMark.path(), "icons_2/15/x_mark.svg");
+    }
+}