diff --git a/preview/assets/hero.css b/preview/assets/hero.css
index e21a4674..489f5a3e 100644
--- a/preview/assets/hero.css
+++ b/preview/assets/hero.css
@@ -36,14 +36,7 @@
     position: absolute;
     top: 38rem;
     left: 50%;
-    width: 20px;
-    height: 20px;
     animation: scroll-down-icon-animation 3000ms ease-in-out infinite;
-    fill: none;
-    stroke: var(--secondary-color-4);
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: 2;
     transform: translate(-50%, -50%);
 }
 
@@ -103,7 +96,7 @@
     background-color: var(--primary-color-3);
 }
 
-.explaination {
+.explanation {
     min-width: 50vw;
     padding-right: 5vw;
     padding-left: 5vw;
@@ -111,12 +104,12 @@
     text-align: center;
 }
 
-.explaination-box h3 {
+.explanation-box h3 {
     margin-top: 0;
     margin-bottom: 0.5rem;
 }
 
-.explaination-box {
+.explanation-box {
     display: flex;
     width: 10rem;
     max-width: 30vw;
diff --git a/preview/src/components/accordion/component.rs b/preview/src/components/accordion/component.rs
index 67a5f02f..5895a870 100644
--- a/preview/src/components/accordion/component.rs
+++ b/preview/src/components/accordion/component.rs
@@ -2,6 +2,7 @@ use dioxus::prelude::*;
 use dioxus_primitives::accordion::{
     self, AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps,
 };
+use dioxus_primitives::icon;
 
 #[component]
 pub fn Accordion(props: AccordionProps) -> Element {
@@ -45,10 +46,10 @@ pub fn AccordionTrigger(props: AccordionTriggerProps) -> Element {
             id: props.id,
             attributes: props.attributes,
             {props.children}
-            svg {
+            icon::Icon {
                 class: "accordion-expand-icon",
-                view_box: "0 0 24 24",
-                xmlns: "http://www.w3.org/2000/svg",
+                width: 20,
+                height: 20,
                 polyline { points: "6 9 12 15 18 9" }
             }
         }
diff --git a/preview/src/components/accordion/style.css b/preview/src/components/accordion/style.css
index 7dd93c3f..e244724d 100644
--- a/preview/src/components/accordion/style.css
+++ b/preview/src/components/accordion/style.css
@@ -82,14 +82,7 @@
 }
 
 .accordion-expand-icon {
-  width: 20px;
-  height: 20px;
-  fill: none;
-  stroke: var(--secondary-color-4);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2;
-  transition: rotate 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: rotate 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .accordion-item[data-open="true"] .accordion-expand-icon {
diff --git a/preview/src/components/badge/component.rs b/preview/src/components/badge/component.rs
index 83115056..1ffbf703 100644
--- a/preview/src/components/badge/component.rs
+++ b/preview/src/components/badge/component.rs
@@ -1,4 +1,5 @@
 use dioxus::prelude::*;
+use dioxus_primitives::icon;
 
 #[derive(Copy, Clone, PartialEq, Default)]
 #[non_exhaustive]
@@ -64,17 +65,10 @@ fn BadgeElement(props: BadgeProps) -> Element {
 #[component]
 pub fn VerifiedIcon() -> Element {
     rsx! {
-        // Badge icon from lucide https://lucide.dev/icons/badge
-        svg {
-            view_box: "0 0 24 24",
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "12",
-            height: "12",
-            fill: "none",
-            stroke: "var(--secondary-color-4)",
-            stroke_linecap: "round",
-            stroke_linejoin: "round",
-            stroke_width: 2,
+        // Badge icon from lucide https://lucide.dev/icons/badge-check
+        icon::Icon {
+            width: 12,
+            height: 12,
             path { d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" }
             path { d: "m9 12 2 2 4-4" }
         }
diff --git a/preview/src/components/calendar/component.rs b/preview/src/components/calendar/component.rs
index 70354c49..1fdbbef9 100644
--- a/preview/src/components/calendar/component.rs
+++ b/preview/src/components/calendar/component.rs
@@ -4,6 +4,7 @@ use dioxus_primitives::calendar::{
     CalendarNavigationProps, CalendarProps, CalendarSelectMonthProps, CalendarSelectYearProps,
     RangeCalendarProps,
 };
+use dioxus_primitives::icon;
 
 #[component]
 pub fn Calendar(props: CalendarProps) -> Element {
@@ -89,10 +90,9 @@ pub fn CalendarPreviousMonthButton(
 ) -> Element {
     rsx! {
         calendar::CalendarPreviousMonthButton { attributes,
-            svg {
-                class: "calendar-previous-month-icon",
-                view_box: "0 0 24 24",
-                xmlns: "http://www.w3.org/2000/svg",
+            icon::Icon {
+                width: 20,
+                height: 20,
                 polyline { points: "15 6 9 12 15 18" }
             }
         }
@@ -105,10 +105,9 @@ pub fn CalendarNextMonthButton(
 ) -> Element {
     rsx! {
         calendar::CalendarNextMonthButton { attributes,
-            svg {
-                class: "calendar-next-month-icon",
-                view_box: "0 0 24 24",
-                xmlns: "http://www.w3.org/2000/svg",
+            icon::Icon {
+                width: 20,
+                height: 20,
                 polyline { points: "9 18 15 12 9 6" }
             }
         }
diff --git a/preview/src/components/calendar/style.css b/preview/src/components/calendar/style.css
index af0fa324..6530d8e6 100644
--- a/preview/src/components/calendar/style.css
+++ b/preview/src/components/calendar/style.css
@@ -237,17 +237,6 @@ td:has(.calendar-grid-cell[data-selection-end="true"]) {
     pointer-events: none;
 }
 
-.calendar-next-month-icon,
-.calendar-previous-month-icon {
-    width: 20px;
-    height: 20px;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: 2;
-}
-
 .calendar-month-select-container,
 .calendar-year-select-container {
     position: relative;
@@ -284,14 +273,4 @@ td:has(.calendar-grid-cell[data-selection-end="true"]) {
     transition:
         background-color 0.2s ease,
         color 0.2s ease;
-}
-
-.select-expand-icon {
-    width: 20px;
-    height: 20px;
-    fill: none;
-    stroke: var(--secondary-color-4);
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: 2;
 }
\ No newline at end of file
diff --git a/preview/src/components/checkbox/component.rs b/preview/src/components/checkbox/component.rs
index 782cb193..be82eccf 100644
--- a/preview/src/components/checkbox/component.rs
+++ b/preview/src/components/checkbox/component.rs
@@ -1,5 +1,6 @@
 use dioxus::prelude::*;
 use dioxus_primitives::checkbox::{self, CheckboxProps};
+use dioxus_primitives::icon;
 
 #[component]
 pub fn Checkbox(props: CheckboxProps) -> Element {
@@ -16,10 +17,10 @@ pub fn Checkbox(props: CheckboxProps) -> Element {
             on_checked_change: props.on_checked_change,
             attributes: props.attributes,
             checkbox::CheckboxIndicator { class: "checkbox-indicator",
-                svg {
-                    class: "checkbox-check-icon",
-                    view_box: "0 0 24 24",
-                    xmlns: "http://www.w3.org/2000/svg",
+                icon::Icon {
+                    width: "1rem",
+                    height: "1rem",
+                    stroke: "currentColor",
                     path { d: "M5 13l4 4L19 7" }
                 }
             }
diff --git a/preview/src/components/checkbox/style.css b/preview/src/components/checkbox/style.css
index 5d236a34..66a1e3de 100644
--- a/preview/src/components/checkbox/style.css
+++ b/preview/src/components/checkbox/style.css
@@ -26,14 +26,4 @@
 
 .checkbox:focus-visible {
     box-shadow: 0 0 0 2px var(--focused-border-color);
-}
-
-.checkbox-check-icon {
-    width: 1rem;
-    height: 1rem;
-    fill: none;
-    stroke: currentcolor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: 2;
-}
+}
\ No newline at end of file
diff --git a/preview/src/components/collapsible/component.rs b/preview/src/components/collapsible/component.rs
index 1dcc75fa..b4a654c5 100644
--- a/preview/src/components/collapsible/component.rs
+++ b/preview/src/components/collapsible/component.rs
@@ -1,8 +1,9 @@
 use dioxus::prelude::*;
-use dioxus_primitives::dioxus_attributes::attributes;
 use dioxus_primitives::collapsible::{
     self, CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps,
 };
+use dioxus_primitives::dioxus_attributes::attributes;
+use dioxus_primitives::icon;
 use dioxus_primitives::merge_attributes;
 
 #[component]
@@ -34,10 +35,9 @@ pub fn CollapsibleTrigger(props: CollapsibleTriggerProps) -> Element {
         collapsible::CollapsibleTrigger { as: props.r#as, attributes: merged,
             {props.children}
             if show_icon {
-                svg {
-                    class: "collapsible-expand-icon",
-                    view_box: "0 0 24 24",
-                    xmlns: "http://www.w3.org/2000/svg",
+                icon::Icon {
+                    width: "1rem",
+                    height: "1rem",
                     // shifted up by 6 polyline { points: "6 9 12 15 18 9" }
                     polyline { points: "6 15 12 21 18 15" }
                     // shifted down by 6 polyline { points: "6 15 12 9 18 15" }
diff --git a/preview/src/components/collapsible/style.css b/preview/src/components/collapsible/style.css
index f9c0d538..474e8be5 100644
--- a/preview/src/components/collapsible/style.css
+++ b/preview/src/components/collapsible/style.css
@@ -27,14 +27,4 @@
 
 .collapsible-content {
   display: contents;
-}
-
-.collapsible-expand-icon {
-  width: 1rem;
-  height: 1rem;
-  fill: none;
-  stroke: var(--secondary-color-3);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2;
-}
+}
\ No newline at end of file
diff --git a/preview/src/components/date_picker/component.rs b/preview/src/components/date_picker/component.rs
index a1bd04f3..3ceb55ac 100644
--- a/preview/src/components/date_picker/component.rs
+++ b/preview/src/components/date_picker/component.rs
@@ -5,6 +5,7 @@ use dioxus_primitives::{
     popover::{PopoverContentProps, PopoverTriggerProps},
     ContentAlign,
 };
+use dioxus_primitives::icon;
 
 use super::super::calendar::*;
 use super::super::popover::*;
@@ -122,10 +123,9 @@ pub fn DateRangePickerInput(props: DatePickerInputProps) -> Element {
 pub fn DatePickerPopoverTrigger(props: PopoverTriggerProps) -> Element {
     rsx! {
         PopoverTrigger { aria_label: "Show Calendar", attributes: props.attributes,
-            svg {
-                class: "date-picker-expand-icon",
-                view_box: "0 0 24 24",
-                xmlns: "http://www.w3.org/2000/svg",
+            icon::Icon {
+                width: 20,
+                height: 20,
                 polyline { points: "6 9 12 15 18 9" }
             }
         }
diff --git a/preview/src/components/date_picker/style.css b/preview/src/components/date_picker/style.css
index 4fb434c2..5066a25c 100644
--- a/preview/src/components/date_picker/style.css
+++ b/preview/src/components/date_picker/style.css
@@ -19,16 +19,6 @@
     rotate: 180deg;
 }
 
-.date-picker-expand-icon {
-    width: 20px;
-    height: 20px;
-    fill: none;
-    stroke: var(--primary-color-7);
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: 2;
-}
-
 [data-disabled="true"] {
     cursor: not-allowed;
     opacity: 0.5;
diff --git a/preview/src/components/navbar/component.rs b/preview/src/components/navbar/component.rs
index 92584b39..ab04cdc3 100644
--- a/preview/src/components/navbar/component.rs
+++ b/preview/src/components/navbar/component.rs
@@ -2,6 +2,7 @@ use dioxus::prelude::*;
 use dioxus_primitives::navbar::{
     self, NavbarContentProps, NavbarItemProps, NavbarNavProps, NavbarProps, NavbarTriggerProps,
 };
+use dioxus_primitives::icon;
 
 #[component]
 pub fn Navbar(props: NavbarProps) -> Element {
@@ -35,10 +36,10 @@ pub fn NavbarTrigger(props: NavbarTriggerProps) -> Element {
     rsx! {
         navbar::NavbarTrigger { class: "navbar-trigger", attributes: props.attributes,
             {props.children}
-            svg {
+            icon::Icon {
                 class: "navbar-expand-icon",
-                view_box: "0 0 24 24",
-                xmlns: "http://www.w3.org/2000/svg",
+                width: 20,
+                height: 20,
                 polyline { points: "6 9 12 15 18 9" }
             }
         }
diff --git a/preview/src/components/navbar/style.css b/preview/src/components/navbar/style.css
index 151cc94e..b8600fd2 100644
--- a/preview/src/components/navbar/style.css
+++ b/preview/src/components/navbar/style.css
@@ -130,13 +130,6 @@
 }
 
 .navbar-expand-icon {
-  width: 20px;
-  height: 20px;
-  fill: none;
-  stroke: var(--secondary-color-4);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2;
   transition: rotate 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
diff --git a/preview/src/components/pagination/component.rs b/preview/src/components/pagination/component.rs
index f04eff42..e4bb7e89 100644
--- a/preview/src/components/pagination/component.rs
+++ b/preview/src/components/pagination/component.rs
@@ -1,4 +1,5 @@
 use dioxus::prelude::*;
+use dioxus_primitives::icon;
 
 #[derive(Copy, Clone, PartialEq, Default)]
 #[non_exhaustive]
@@ -150,10 +151,9 @@ pub fn PaginationPrevious(
             onmouseup,
             attributes,
             // ChevronLeft icon from lucide https://lucide.dev/icons/chevron-left
-            svg {
-                class: "pagination-icon",
-                view_box: "0 0 24 24",
-                xmlns: "http://www.w3.org/2000/svg",
+            icon::Icon {
+                width: "1rem",
+                height: "1rem",
                 polyline { points: "15 6 9 12 15 18" }
             }
             span { class: "pagination-label", "Previous" }
@@ -181,10 +181,9 @@ pub fn PaginationNext(
             attributes,
             span { class: "pagination-label", "Next" }
             // ChevronRight icon from lucide https://lucide.dev/icons/chevron-right
-            svg {
-                class: "pagination-icon",
-                view_box: "0 0 24 24",
-                xmlns: "http://www.w3.org/2000/svg",
+            icon::Icon {
+                width: "1rem",
+                height: "1rem",
                 polyline { points: "9 6 15 12 9 18" }
             }
         }
@@ -202,10 +201,9 @@ pub fn PaginationEllipsis(
             aria_hidden: "true",
             ..attributes,
             // MoreHorizontal icon from lucide https://lucide.dev/icons/more-horizontal
-            svg {
-                class: "pagination-icon",
-                view_box: "0 0 24 24",
-                xmlns: "http://www.w3.org/2000/svg",
+            icon::Icon {
+                width: "1rem",
+                height: "1rem",
                 circle { cx: "5", cy: "12", r: "1.5" }
                 circle { cx: "12", cy: "12", r: "1.5" }
                 circle { cx: "19", cy: "12", r: "1.5" }
diff --git a/preview/src/components/pagination/style.css b/preview/src/components/pagination/style.css
index ae0cf434..91048a13 100644
--- a/preview/src/components/pagination/style.css
+++ b/preview/src/components/pagination/style.css
@@ -46,10 +46,6 @@
   color: var(--secondary-color-4);
 }
 
-.pagination-ellipsis .pagination-icon {
-  fill: currentcolor;
-}
-
 .pagination-link[data-size="icon"],
 .pagination-ellipsis {
   width: 2rem;
@@ -92,17 +88,6 @@
   }
 }
 
-
-.pagination-icon {
-  width: 1rem;
-  height: 1rem;
-  fill: none;
-  stroke: currentcolor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2;
-}
-
 /* TODO: move to shared css */
 
 /* Screen-reader only text */
diff --git a/preview/src/components/select/component.rs b/preview/src/components/select/component.rs
index 88e70f02..97fd0d0c 100644
--- a/preview/src/components/select/component.rs
+++ b/preview/src/components/select/component.rs
@@ -3,6 +3,7 @@ use dioxus_primitives::select::{
     self, SelectGroupLabelProps, SelectGroupProps, SelectListProps, SelectOptionProps, SelectProps,
     SelectTriggerProps, SelectValueProps,
 };
+use dioxus_primitives::icon;
 
 #[component]
 pub fn Select<T: Clone + PartialEq + 'static>(props: SelectProps<T>) -> Element {
@@ -29,10 +30,9 @@ pub fn SelectTrigger(props: SelectTriggerProps) -> Element {
     rsx! {
         select::SelectTrigger { class: "select-trigger", attributes: props.attributes,
             {props.children}
-            svg {
-                class: "select-expand-icon",
-                view_box: "0 0 24 24",
-                xmlns: "http://www.w3.org/2000/svg",
+            icon::Icon {
+                width: 20,
+                height: 20,
                 polyline { points: "6 9 12 15 18 9" }
             }
         }
@@ -105,10 +105,9 @@ pub fn SelectOption<T: Clone + PartialEq + 'static>(props: SelectOptionProps<T>)
 pub fn SelectItemIndicator() -> Element {
     rsx! {
         select::SelectItemIndicator {
-            svg {
-                class: "select-check-icon",
-                view_box: "0 0 24 24",
-                xmlns: "http://www.w3.org/2000/svg",
+            icon::Icon {
+                width: "1rem",
+                height: "1rem",
                 path { d: "M5 13l4 4L19 7" }
             }
         }
diff --git a/preview/src/components/select/style.css b/preview/src/components/select/style.css
index 5a98dd3e..8227b18d 100644
--- a/preview/src/components/select/style.css
+++ b/preview/src/components/select/style.css
@@ -33,26 +33,6 @@
   pointer-events: none;
 }
 
-.select-expand-icon {
-  width: 20px;
-  height: 20px;
-  fill: none;
-  stroke: var(--primary-color-7);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2;
-}
-
-.select-check-icon {
-  width: 1rem;
-  height: 1rem;
-  fill: none;
-  stroke: var(--secondary-color-5);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2;
-}
-
 .select[data-disabled="true"] .select-trigger {
   color: var(--secondary-color-5);
   cursor: not-allowed;
diff --git a/preview/src/components/sheet/component.rs b/preview/src/components/sheet/component.rs
index c7b091a2..4d1b0b5f 100644
--- a/preview/src/components/sheet/component.rs
+++ b/preview/src/components/sheet/component.rs
@@ -3,6 +3,7 @@ use dioxus_primitives::dioxus_attributes::attributes;
 use dioxus_primitives::dialog::{
     self, DialogCtx, DialogDescriptionProps, DialogRootProps, DialogTitleProps,
 };
+use dioxus_primitives::icon;
 
 #[derive(Debug, Clone, Copy, Default, PartialEq)]
 pub enum SheetSide {
@@ -78,10 +79,9 @@ pub fn SheetContent(
             attributes,
             {children}
             SheetClose { class: "sheet-close",
-                svg {
-                    class: "sheet-close-icon",
-                    view_box: "0 0 24 24",
-                    xmlns: "http://www.w3.org/2000/svg",
+                icon::Icon {
+                    width: 20,
+                    height: 20,
                     path { d: "M18 6 6 18" }
                     path { d: "m6 6 12 12" }
                 }
diff --git a/preview/src/components/sheet/style.css b/preview/src/components/sheet/style.css
index adc03ce9..fecbabf1 100644
--- a/preview/src/components/sheet/style.css
+++ b/preview/src/components/sheet/style.css
@@ -250,14 +250,4 @@
 
 .sheet-close:hover {
   color: var(--secondary-color-4);
-}
-
-.sheet-close-icon {
-  width: 20px;
-  height: 20px;
-  fill: none;
-  stroke: currentcolor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2;
-}
+}
\ No newline at end of file
diff --git a/preview/src/components/sidebar/component.rs b/preview/src/components/sidebar/component.rs
index b84e6a1b..11a74ec1 100644
--- a/preview/src/components/sidebar/component.rs
+++ b/preview/src/components/sidebar/component.rs
@@ -9,6 +9,7 @@ use dioxus::prelude::*;
 use dioxus_primitives::dioxus_attributes::attributes;
 use dioxus_primitives::merge_attributes;
 use dioxus_primitives::use_controlled;
+use dioxus_primitives::icon;
 
 // constants
 const SIDEBAR_WIDTH: &str = "16rem";
@@ -367,15 +368,9 @@ pub fn SidebarTrigger(
                 ctx.toggle();
             },
             attributes: merged,
-            svg {
-                class: "sidebar-trigger-icon",
-                view_box: "0 0 24 24",
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "none",
-                stroke: "currentColor",
-                stroke_width: "2",
-                stroke_linecap: "round",
-                stroke_linejoin: "round",
+            icon::Icon {
+                width: "1rem",
+                height: "1rem",
                 rect {
                     x: "3",
                     y: "3",
diff --git a/preview/src/components/sidebar/style.css b/preview/src/components/sidebar/style.css
index fe3f9bb9..62579837 100644
--- a/preview/src/components/sidebar/style.css
+++ b/preview/src/components/sidebar/style.css
@@ -186,11 +186,6 @@
   line-height: 0;
 }
 
-.sidebar-trigger-icon {
-  width: 1rem;
-  height: 1rem;
-}
-
 .sidebar-rail {
   position: absolute;
   z-index: 20;
diff --git a/preview/src/components/sidebar/variants/floating/mod.rs b/preview/src/components/sidebar/variants/floating/mod.rs
index 3fd67fb4..e5cd8f43 100644
--- a/preview/src/components/sidebar/variants/floating/mod.rs
+++ b/preview/src/components/sidebar/variants/floating/mod.rs
@@ -13,6 +13,7 @@ use crate::components::sidebar::{
     SidebarTrigger, SidebarVariant,
 };
 use crate::components::skeleton::Skeleton;
+use dioxus_primitives::icon;
 use dioxus::prelude::*;
 
 #[derive(Clone, PartialEq)]
@@ -506,15 +507,10 @@ fn DemoSettingControls(
 #[component]
 fn Icon(#[props(default = "sidebar-icon")] class: &'static str) -> Element {
     rsx! {
-        svg {
-            xmlns: "http://www.w3.org/2000/svg",
+        icon::Icon {
             class,
-            view_box: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            stroke_width: "2",
-            stroke_linecap: "round",
-            stroke_linejoin: "round",
+            width: 24,
+            height: 24,
             circle { cx: "12", cy: "12", r: "10" }
         }
     }
@@ -523,15 +519,10 @@ fn Icon(#[props(default = "sidebar-icon")] class: &'static str) -> Element {
 #[component]
 fn ChevronIcon() -> Element {
     rsx! {
-        svg {
-            xmlns: "http://www.w3.org/2000/svg",
+        icon::Icon {
             class: "sidebar-icon sidebar-chevron",
-            view_box: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            stroke_width: "2",
-            stroke_linecap: "round",
-            stroke_linejoin: "round",
+            width: 24,
+            height: 24,
             path { d: "m9 18 6-6-6-6" }
         }
     }
diff --git a/preview/src/components/sidebar/variants/inset/mod.rs b/preview/src/components/sidebar/variants/inset/mod.rs
index 5a8ed70d..7f1c2be7 100644
--- a/preview/src/components/sidebar/variants/inset/mod.rs
+++ b/preview/src/components/sidebar/variants/inset/mod.rs
@@ -13,6 +13,7 @@ use crate::components::sidebar::{
     SidebarTrigger, SidebarVariant,
 };
 use crate::components::skeleton::Skeleton;
+use dioxus_primitives::icon;
 use dioxus::prelude::*;
 
 #[derive(Clone, PartialEq)]
@@ -506,15 +507,10 @@ fn DemoSettingControls(
 #[component]
 fn Icon(#[props(default = "sidebar-icon")] class: &'static str) -> Element {
     rsx! {
-        svg {
-            xmlns: "http://www.w3.org/2000/svg",
+        icon::Icon {
             class,
-            view_box: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            stroke_width: "2",
-            stroke_linecap: "round",
-            stroke_linejoin: "round",
+            width: 24,
+            height: 24,
             circle { cx: "12", cy: "12", r: "10" }
         }
     }
@@ -523,15 +519,10 @@ fn Icon(#[props(default = "sidebar-icon")] class: &'static str) -> Element {
 #[component]
 fn ChevronIcon() -> Element {
     rsx! {
-        svg {
-            xmlns: "http://www.w3.org/2000/svg",
+        icon::Icon {
             class: "sidebar-icon sidebar-chevron",
-            view_box: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            stroke_width: "2",
-            stroke_linecap: "round",
-            stroke_linejoin: "round",
+            width: 24,
+            height: 24,
             path { d: "m9 18 6-6-6-6" }
         }
     }
diff --git a/preview/src/components/sidebar/variants/main/mod.rs b/preview/src/components/sidebar/variants/main/mod.rs
index 8d09bc45..812b2651 100644
--- a/preview/src/components/sidebar/variants/main/mod.rs
+++ b/preview/src/components/sidebar/variants/main/mod.rs
@@ -13,6 +13,7 @@ use crate::components::sidebar::{
     SidebarTrigger, SidebarVariant,
 };
 use crate::components::skeleton::Skeleton;
+use dioxus_primitives::icon;
 use dioxus::prelude::*;
 
 #[derive(Clone, PartialEq)]
@@ -506,15 +507,10 @@ fn DemoSettingControls(
 #[component]
 fn Icon(#[props(default = "sidebar-icon")] class: &'static str) -> Element {
     rsx! {
-        svg {
-            xmlns: "http://www.w3.org/2000/svg",
+        icon::Icon {
             class,
-            view_box: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            stroke_width: "2",
-            stroke_linecap: "round",
-            stroke_linejoin: "round",
+            width: 24,
+            height: 24,
             circle { cx: "12", cy: "12", r: "10" }
         }
     }
@@ -523,15 +519,10 @@ fn Icon(#[props(default = "sidebar-icon")] class: &'static str) -> Element {
 #[component]
 fn ChevronIcon() -> Element {
     rsx! {
-        svg {
-            xmlns: "http://www.w3.org/2000/svg",
+        icon::Icon {
             class: "sidebar-icon sidebar-chevron",
-            view_box: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            stroke_width: "2",
-            stroke_linecap: "round",
-            stroke_linejoin: "round",
+            width: 24,
+            height: 24,
             path { d: "m9 18 6-6-6-6" }
         }
     }
diff --git a/preview/src/main.rs b/preview/src/main.rs
index 5ce665cc..7a2f8514 100644
--- a/preview/src/main.rs
+++ b/preview/src/main.rs
@@ -4,6 +4,7 @@ use crate::components::{separator::Separator, tabs::component::*};
 use crate::dioxus_router::LinkProps;
 use dioxus::prelude::*;
 use dioxus_i18n::prelude::*;
+use dioxus_primitives::icon::Icon;
 
 use std::str::FromStr;
 use strum::{Display, EnumIter, EnumString, IntoEnumIterator};
@@ -14,7 +15,7 @@ mod theme;
 
 #[derive(Copy, Clone, PartialEq)]
 enum ComponentType {
-    /// Normal componet as default.
+    /// Normal component as default.
     Normal,
     /// Component that render the preview inside an iframe for isolation.
     Block,
@@ -219,16 +220,9 @@ fn Navbar() -> Element {
                         to: Route::home(),
                         class: "navbar-brand",
                         aria_label: "Back",
-                        svg {
-                            view_box: "0 0 24 24",
-                            xmlns: "http://www.w3.org/2000/svg",
+                        Icon {
                             width: "2rem",
                             height: "2rem",
-                            fill: "none",
-                            stroke: "var(--secondary-color-4)",
-                            stroke_linecap: "round",
-                            stroke_linejoin: "round",
-                            stroke_width: 2,
                             path { d: "M15 18 L9 12 L15 6" }
                         }
                     }
@@ -252,11 +246,10 @@ fn Navbar() -> Element {
                 //     to: "https://crates.io/crates/dioxus-components",
                 //     class: "navbar-link",
                 //     aria_label: "Dioxus components crates.io",
-                //     svg {
-                //         "viewBox": "0 0 576 512",
-                //         xmlns: "http://www.w3.org/2000/svg",
-                //         width: "24",
-                //         height: "24",
+                //     Icon {
+                //         width: 24,
+                //         height: 24,
+                //         viewBox: ViewBox::new(0, 0, 576, 512),
                 //         path {
                 //             d: "M290.8 48.6l78.4 29.7L288 109.5 206.8 78.3l78.4-29.7c1.8-.7 3.8-.7 5.7 0zM136 92.5l0 112.2c-1.3 .4-2.6 .8-3.9 1.3l-96 36.4C14.4 250.6 0 271.5 0 294.7L0 413.9c0 22.2 13.1 42.3 33.5 51.3l96 42.2c14.4 6.3 30.7 6.3 45.1 0L288 457.5l113.5 49.9c14.4 6.3 30.7 6.3 45.1 0l96-42.2c20.3-8.9 33.5-29.1 33.5-51.3l0-119.1c0-23.3-14.4-44.1-36.1-52.4l-96-36.4c-1.3-.5-2.6-.9-3.9-1.3l0-112.2c0-23.3-14.4-44.1-36.1-52.4l-96-36.4c-12.8-4.8-26.9-4.8-39.7 0l-96 36.4C150.4 48.4 136 69.3 136 92.5zM392 210.6l-82.4 31.2 0-89.2L392 121l0 89.6zM154.8 250.9l78.4 29.7L152 311.7 70.8 280.6l78.4-29.7c1.8-.7 3.8-.7 5.7 0zm18.8 204.4l0-100.5L256 323.2l0 95.9-82.4 36.2zM421.2 250.9c1.8-.7 3.8-.7 5.7 0l78.4 29.7L424 311.7l-81.2-31.1 78.4-29.7zM523.2 421.2l-77.6 34.1 0-100.5L528 323.2l0 90.7c0 3.2-1.9 6-4.8 7.3z",
                 //             fill: "currentColor",
@@ -339,13 +332,12 @@ fn CopyButton(#[props(extends=GlobalAttributes)] attributes: Vec<Attribute>) ->
 #[component]
 fn CopyIcon() -> Element {
     rsx! {
-        svg {
-            width: "24",
-            height: "25",
-            view_box: "0 0 24 25",
-            stroke_width: "1.5",
+        Icon {
+            width: 24,
+            height: 25,
             fill: "currentColor",
             stroke: "none",
+            stroke_width: 1.5,
             // Clipboard image from octicons (MIT) https://github.com/primer/octicons/blob/v2.0.0/svg/clippy.svg
             path { d: "M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z" }
             path { d: "M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z" }
@@ -356,13 +348,9 @@ fn CopyIcon() -> Element {
 #[component]
 fn CheckIcon() -> Element {
     rsx! {
-        svg {
-            width: "24",
-            height: "25",
-            view_box: "0 0 24 25",
-            stroke_width: "2",
-            stroke: "currentColor",
-            xmlns: "http://www.w3.org/2000/svg",
+        Icon {
+            width: 24,
+            height: 25,
             path { d: "M5 13l4 4L19 7" }
         }
     }
@@ -395,15 +383,9 @@ fn DarkModeToggle() -> Element {
 #[component]
 fn DarkModeIcon() -> Element {
     rsx! {
-        svg {
-            width: "24",
-            height: "24",
-            view_box: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            stroke_width: "2",
-            stroke_linecap: "round",
-            stroke_linejoin: "round",
+        Icon {
+            width: 24,
+            height: 24,
             path { d: "M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" }
         }
     }
@@ -412,15 +394,9 @@ fn DarkModeIcon() -> Element {
 #[component]
 fn LightModeIcon() -> Element {
     rsx! {
-        svg {
-            width: "24",
-            height: "24",
-            view_box: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            stroke_width: "2",
-            stroke_linecap: "round",
-            stroke_linejoin: "round",
+        Icon {
+            width: 24,
+            height: 24,
             circle { cx: "12", cy: "12", r: "4" }
             line {
                 x1: "12",
@@ -478,20 +454,11 @@ fn LightModeIcon() -> Element {
 #[component]
 fn PlusIcon() -> Element {
     rsx! {
-        svg {
-            height: "2rem",
-            view_box: "0 0 24 24",
+        Icon {
             width: "2rem",
-            xmlns: "http://www.w3.org/2000/svg",
+            height: "2rem",
             "aria-label": "Add",
-            path {
-                d: "M5 12h14m-7-7v14",
-                fill: "none",
-                stroke: "currentColor",
-                stroke_linecap: "round",
-                stroke_linejoin: "round",
-                stroke_width: "2",
-            }
+            path { d: "M5 12h14m-7-7v14", }
         }
     }
 }
@@ -500,18 +467,11 @@ fn PlusIcon() -> Element {
 #[component]
 fn SearchIcon() -> Element {
     rsx! {
-        svg {
-            height: "2rem",
-            view_box: "0 0 24 24",
+        Icon {
             width: "2rem",
-            xmlns: "http://www.w3.org/2000/svg",
+            height: "2rem",
             "aria-label": "Search",
             g {
-                fill: "none",
-                stroke: "currentColor",
-                stroke_linecap: "round",
-                stroke_linejoin: "round",
-                stroke_width: "2",
                 path { d: "m21 21l-4.34-4.34" }
                 circle { cx: "11", cy: "11", r: "8" }
             }
@@ -523,18 +483,11 @@ fn SearchIcon() -> Element {
 #[component]
 fn EditIcon() -> Element {
     rsx! {
-        svg {
-            height: "2rem",
-            view_box: "0 0 24 24",
+        Icon {
             width: "2rem",
-            xmlns: "http://www.w3.org/2000/svg",
+            height: "2rem",
             "aria-label": "Edit",
             g {
-                fill: "none",
-                stroke: "currentColor",
-                stroke_linecap: "round",
-                stroke_linejoin: "round",
-                stroke_width: "2",
                 path { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }
                 path { d: "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" }
             }
@@ -613,10 +566,9 @@ fn LanguageSelect() -> Element {
                 }
                 span { class: "language-select-value",
                     {current_lang.read().flag()}
-                    svg {
-                        class: "select-expand-icon",
-                        view_box: "0 0 24 24",
-                        xmlns: "http://www.w3.org/2000/svg",
+                    Icon {
+                        width: 20,
+                        height: 20,
                         polyline { points: "6 9 12 15 18 9" }
                     }
                 }
@@ -647,30 +599,12 @@ fn ComponentCode(
             onclick: move |_| {
                 collapsed.toggle();
             },
-            if collapsed() {
-                svg {
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    stroke: "var(--secondary-color-4)",
-                    stroke_linecap: "round",
-                    stroke_linejoin: "round",
-                    stroke_width: "2",
-                    width: "20px",
-                    height: "20px",
-                    view_box: "0 0 24 24",
+            Icon {
+                width: 20,
+                height: 20,
+                if collapsed() {
                     polyline { points: "6 9 12 15 18 9" }
-                }
-            } else {
-                svg {
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    stroke: "var(--secondary-color-4)",
-                    stroke_linecap: "round",
-                    stroke_linejoin: "round",
-                    stroke_width: "2",
-                    width: "20px",
-                    height: "20px",
-                    view_box: "0 0 24 24",
+                } else {
                     polyline { points: "6 15 12 9 18 15" }
                 }
             }
@@ -730,7 +664,7 @@ fn ComponentCode(
 }
 
 #[component]
-fn ColapsibleCodeBlock(highlighted: HighlightedCode) -> Element {
+fn CollapsibleCodeBlock(highlighted: HighlightedCode) -> Element {
     let mut collapsed = use_signal(|| true);
 
     let expand = rsx! {
@@ -747,30 +681,12 @@ fn ColapsibleCodeBlock(highlighted: HighlightedCode) -> Element {
             onclick: move |_| {
                 collapsed.toggle();
             },
-            if collapsed() {
-                svg {
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    stroke: "var(--secondary-color-4)",
-                    stroke_linecap: "round",
-                    stroke_linejoin: "round",
-                    stroke_width: "2",
-                    width: "20px",
-                    height: "20px",
-                    view_box: "0 0 24 24",
+            Icon {
+                width: 20,
+                height: 20,
+                if collapsed() {
                     polyline { points: "6 9 12 15 18 9" }
-                }
-            } else {
-                svg {
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    stroke: "var(--secondary-color-4)",
-                    stroke_linecap: "round",
-                    stroke_linejoin: "round",
-                    stroke_width: "2",
-                    width: "20px",
-                    height: "20px",
-                    view_box: "0 0 24 24",
+                } else {
                     polyline { points: "6 15 12 9 18 15" }
                 }
             }
@@ -1006,7 +922,7 @@ fn ComponentVariantHighlight(variant: ComponentVariantDemoData, main_variant: bo
                     value: "Code",
                     width: "100%",
                     position: "relative",
-                    ColapsibleCodeBlock { highlighted }
+                    CollapsibleCodeBlock { highlighted }
                 }
             }
         }
@@ -1086,7 +1002,7 @@ fn BlockComponentVariantHighlight(
                             component_type: ComponentType::Block,
                         }
                     } else {
-                        ColapsibleCodeBlock { highlighted }
+                        CollapsibleCodeBlock { highlighted }
                     }
                 }
             }
@@ -1142,11 +1058,11 @@ fn Home(iframe: Option<bool>, dark_mode: Option<bool>) -> Element {
                     i { "customizable" }
                     " components for Dioxus."
                 }
-                Explaination {}
-                svg {
+                Explanation {}
+                Icon {
                     id: "scroll-down-icon",
-                    view_box: "0 0 24 24",
-                    xmlns: "http://www.w3.org/2000/svg",
+                    width: 20,
+                    height: 20,
                     polyline { points: "6 9 12 15 18 9" }
                 }
             }
@@ -1172,22 +1088,22 @@ fn Home(iframe: Option<bool>, dark_mode: Option<bool>) -> Element {
 }
 
 #[component]
-fn Explaination() -> Element {
+fn Explanation() -> Element {
     rsx! {
-        div { class: "explaination",
+        div { class: "explanation",
             p {
                 "Dioxus components is a shadcn-inspired library of components built on top of Dioxus primitives"
             }
             div { display: "flex", justify_content: "space-between",
-                div { class: "explaination-box",
+                div { class: "explanation-box",
                     h3 { SearchIcon {} }
                     p { "Find a component" }
                 }
-                div { class: "explaination-box",
+                div { class: "explanation-box",
                     h3 { PlusIcon {} }
                     p { "Add it with dx" }
                 }
-                div { class: "explaination-box",
+                div { class: "explanation-box",
                     h3 { EditIcon {} }
                     p { "Customize it for your project" }
                 }
@@ -1252,11 +1168,10 @@ fn ComponentGalleryPreview(component: ComponentDemoData) -> Element {
 #[component]
 fn GotoIcon(mut props: LinkProps) -> Element {
     props.children = rsx! {
-        svg {
-            width: "20",
-            height: "20",
-            view_box: "0 0 24 24",
-            xmlns: "http://www.w3.org/2000/svg",
+        Icon {
+            width: 20,
+            height: 20,
+            stroke_width: 0.25,
             path {
                 d: "M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h7v2H5v14h14v-7h2v7q0 .825-.587 1.413T19 21zm4.7-5.3l-1.4-1.4L17.6 5H14V3h7v7h-2V6.4z",
                 fill: "var(--secondary-color-4)",
diff --git a/primitives/src/calendar.rs b/primitives/src/calendar.rs
index 355b9762..576748a7 100644
--- a/primitives/src/calendar.rs
+++ b/primitives/src/calendar.rs
@@ -9,7 +9,7 @@ use std::{
 
 use time::{ext::NumericalDuration, macros::date, Date, Month, OffsetDateTime, Weekday};
 
-use crate::{date_picker::DefaultCalendarProps, LocalDateExt as _};
+use crate::{date_picker::DefaultCalendarProps, icon::Icon, LocalDateExt as _};
 
 // A collection of [`Weekday`]s stored as a single byte
 // Implemented as a bitmask where bits 1-7 correspond to Monday-Sunday
@@ -1652,12 +1652,7 @@ pub fn CalendarSelectMonth(props: CalendarSelectMonthProps) -> Element {
             }
             span { class: "calendar-month-select-value",
                 {base_ctx.format_month.call(month)}
-                svg {
-                    class: "select-expand-icon",
-                    view_box: "0 0 24 24",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    polyline { points: "6 9 12 15 18 9" }
-                }
+                DropDownIcon { }
             }
         }
     }
@@ -1763,12 +1758,7 @@ pub fn CalendarSelectYear(props: CalendarSelectYearProps) -> Element {
             }
             span { class: "calendar-year-select-value",
                 "{year}"
-                svg {
-                    class: "select-expand-icon",
-                    view_box: "0 0 24 24",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    polyline { points: "6 9 12 15 18 9" }
-                }
+                DropDownIcon { }
             }
         }
     }
@@ -2117,6 +2107,17 @@ fn RangeCalendarDay(props: CalendarDayProps) -> Element {
     }
 }
 
+#[component]
+fn DropDownIcon() -> Element {
+    rsx! {
+        Icon {
+            width: 20,
+            height: 20,
+            polyline { points: "6 9 12 15 18 9" }
+        }
+    }
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
diff --git a/primitives/src/icon.rs b/primitives/src/icon.rs
index 641c6fb6..8e51e85a 100644
--- a/primitives/src/icon.rs
+++ b/primitives/src/icon.rs
@@ -110,17 +110,9 @@ pub struct IconProps {
     #[props(default = ViewBox::new(0, 0, 24, 24))]
     pub view_box: ViewBox,
 
-    /// The horizontal length in the user coordinate system
-    #[props(default = 24)]
-    pub width: u16,
-
-    /// The vertical length in the user coordinate system
-    #[props(default = 24)]
-    pub height: u16,
-
     /// The width of the stroke to be applied to the shape
-    #[props(default = 2)]
-    pub stroke_width: u8,
+    #[props(default = 2.)]
+    pub stroke_width: f64,
 
     /// The shape to be used at the end of open sub-paths when they are stroked
     #[props(default)]
@@ -158,6 +150,8 @@ pub struct IconProps {
 /// fn Demo() -> Element {
 ///     rsx! {
 ///         Icon {
+///             width: 24,
+///             height: 24,
 ///             circle { cx: 12, cy:12, r: 10 }
 ///             path { d: "M8 14s1.5 2 4 2 4-2 4-2" }
 ///             line { x1: 9, x2: 9.01, y1: 9, y2: 9 }
@@ -172,8 +166,6 @@ pub fn Icon(props: IconProps) -> Element {
         svg {
             xmlns: "http://www.w3.org/2000/svg",
             view_box: props.view_box.to_string(),
-            width: props.width,
-            height: props.height,
             fill: props.fill,
             stroke: props.stroke,
             stroke_linecap: props.stroke_line_cap.to_class(),