DioxusLabs · ddudenin · Mar 4, 2026
diff --git 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,20 +96,20 @@
     background-color: var(--primary-color-3);
 }
 
-.explaination {
+.explanation {
     min-width: 50vw;
     padding-right: 5vw;
     padding-left: 5vw;
     margin-bottom: 1rem;
     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
@@ -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
@@ -74,13 +74,6 @@
 }
 
 .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 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 

diff --git 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
@@ -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
@@ -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;
 }
diff --git 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
@@ -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;
-}
+}
diff --git 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
@@ -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;
-}
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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" }