diff --git a/assets/icons/heart-off.svg b/assets/icons/heart-off.svg
new file mode 100644
index 00000000..68cda020
--- /dev/null
+++ b/assets/icons/heart-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-off"><line x1="2" y1="2" x2="22" y2="22"/><path d="M16.5 16.5 12 21l-7-7c-1.5-1.45-3-3.2-3-5.5a5.5 5.5 0 0 1 2.14-4.35"/><path d="M8.76 3.1c1.15.22 2.13.78 3.24 1.9 1.5-1.5 2.74-2 4.5-2A5.5 5.5 0 0 1 22 8.5c0 2.12-1.3 3.78-2.67 5.17"/></svg>
diff --git a/assets/icons/heart.svg b/assets/icons/heart.svg
new file mode 100644
index 00000000..2f267c91
--- /dev/null
+++ b/assets/icons/heart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
diff --git a/assets/icons/star-off.svg b/assets/icons/star-off.svg
new file mode 100644
index 00000000..a2620605
--- /dev/null
+++ b/assets/icons/star-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star-off"><path d="M8.34 8.34 2 9.27l5 4.87L5.82 21 12 17.77 18.18 21l-.59-3.43"/><path d="M18.42 12.76 22 9.27l-6.91-1L12 2l-1.44 2.91"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
diff --git a/assets/icons/star.svg b/assets/icons/star.svg
new file mode 100644
index 00000000..8d931311
--- /dev/null
+++ b/assets/icons/star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
diff --git a/assets/icons/thumbs-down.svg b/assets/icons/thumbs-down.svg
new file mode 100644
index 00000000..816273e9
--- /dev/null
+++ b/assets/icons/thumbs-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-down"><path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/></svg>
diff --git a/assets/icons/thumbs-up.svg b/assets/icons/thumbs-up.svg
new file mode 100644
index 00000000..01fae76f
--- /dev/null
+++ b/assets/icons/thumbs-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-up"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>
diff --git a/crates/story/src/icon_story.rs b/crates/story/src/icon_story.rs
index 548db4af..26f9ce9f 100644
--- a/crates/story/src/icon_story.rs
+++ b/crates/story/src/icon_story.rs
@@ -1,5 +1,10 @@
 use gpui::{px, rems, ParentElement, Render, Styled, View, VisualContext as _, WindowContext};
-use ui::{h_flex, theme::ActiveTheme as _, v_flex, Icon, IconName};
+use ui::{
+    button::{Button, ButtonStyle},
+    h_flex,
+    theme::ActiveTheme as _,
+    v_flex, Icon, IconName,
+};
 
 pub struct IconStory {}
 
@@ -25,6 +30,24 @@ impl Render for IconStory {
                         .text_color(ui::green_500()),
                 )
                 .child(Icon::new(IconName::Maximize).size(px(55.)))
+                .child(
+                    Button::new("like1", cx)
+                        .icon(
+                            Icon::new(IconName::Heart)
+                                .text_color(ui::gray_500())
+                                .size_6(),
+                        )
+                        .style(ButtonStyle::Ghost),
+                )
+                .child(
+                    Button::new("like2", cx)
+                        .icon(
+                            Icon::new(IconName::HeartOff)
+                                .text_color(ui::red_500())
+                                .size_6(),
+                        )
+                        .style(ButtonStyle::Ghost),
+                )
                 .child(
                     Icon::new(IconName::Plus)
                         .w(rems(3.))
diff --git a/crates/ui/src/button.rs b/crates/ui/src/button.rs
index b60a981e..fcf06dca 100644
--- a/crates/ui/src/button.rs
+++ b/crates/ui/src/button.rs
@@ -267,7 +267,7 @@ impl RenderOnce for Button {
                     .text_color(text_color)
                     .when(!self.loading, |this| {
                         this.when_some(self.icon, |this, icon| {
-                            this.child(icon.size(self.size).text_color(text_color))
+                            this.child(div().text_color(text_color).child(icon.size(self.size)))
                         })
                     })
                     .when(self.loading, |this| {
diff --git a/crates/ui/src/icon.rs b/crates/ui/src/icon.rs
index ecd102d1..aceac9ab 100644
--- a/crates/ui/src/icon.rs
+++ b/crates/ui/src/icon.rs
@@ -30,6 +30,12 @@ pub enum IconName {
     Eye,
     EyeOff,
     Inbox,
+    Heart,
+    HeartOff,
+    Star,
+    StarOff,
+    ThumbsUp,
+    ThumbsDown,
 }
 
 impl IconName {
@@ -59,6 +65,12 @@ impl IconName {
             IconName::Eye => "icons/eye.svg",
             IconName::EyeOff => "icons/eye-off.svg",
             IconName::Inbox => "icons/inbox.svg",
+            IconName::Heart => "icons/heart.svg",
+            IconName::HeartOff => "icons/heart-off.svg",
+            IconName::Star => "icons/star.svg",
+            IconName::StarOff => "icons/star-off.svg",
+            IconName::ThumbsUp => "icons/thumbs-up.svg",
+            IconName::ThumbsDown => "icons/thumbs-down.svg",
         }
         .into()
     }
@@ -171,7 +183,7 @@ impl Styled for Icon {
 
 impl RenderOnce for Icon {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        let text_color = self.text_color.unwrap_or_else(|| cx.theme().foreground);
+        let text_color = self.text_color.unwrap_or_else(|| cx.text_style().color);
 
         self.base
             .text_color(text_color)