diff --git a/src/ui/components/shell.rs b/src/ui/components/shell.rs
index bdcca62..2bc0396 100644
--- a/src/ui/components/shell.rs
+++ b/src/ui/components/shell.rs
@@ -1,5 +1,7 @@
 use maud::{PreEscaped, html};
 
+// TODO : refactor shell
+
 /// Represents the HTML structure of a page shell, including the head, body class, and body content.
 ///
 /// This structure is used to construct the overall HTML structure of a page, making it easier to generate consistent HTML pages dynamically.
diff --git a/src/ui/mod.rs b/src/ui/mod.rs
index 3bce85f..9b06d13 100644
--- a/src/ui/mod.rs
+++ b/src/ui/mod.rs
@@ -44,6 +44,7 @@ pub mod prelude {
     pub use super::primitives::shadow::Shadow;
     pub use super::primitives::sized::Sized;
     pub use super::primitives::space::{ScreenValue, SpaceBetween};
+    pub use super::primitives::svg::SVG;
     pub use super::primitives::text::{
         Code, DecorationKind, DecorationStyle, DecorationThickness, LetterSpacing, LineClamp,
         LineHeight, ListStyle, NumberStyle, Paragraph, Span, Text, TextAlignment, TextContent,
diff --git a/src/ui/primitives/mod.rs b/src/ui/primitives/mod.rs
index c2ae3dc..1ddc144 100644
--- a/src/ui/primitives/mod.rs
+++ b/src/ui/primitives/mod.rs
@@ -22,6 +22,7 @@ pub mod rounded;
 pub mod shadow;
 pub mod sized;
 pub mod space;
+pub mod svg;
 pub mod text;
 pub mod transform;
 pub mod visibility;
diff --git a/src/ui/primitives/svg.rs b/src/ui/primitives/svg.rs
new file mode 100644
index 0000000..79de1cf
--- /dev/null
+++ b/src/ui/primitives/svg.rs
@@ -0,0 +1,76 @@
+use maud::{Markup, Render, html};
+
+use crate::ui::{UIWidget, color::UIColor};
+
+#[allow(non_snake_case)]
+pub fn SVG<T: UIWidget + 'static>(inner: T) -> SVGWidget {
+    SVGWidget(Box::new(inner), None, None, None)
+}
+
+pub struct SVGWidget(
+    Box<dyn UIWidget>,
+    Option<Box<dyn UIColor>>,
+    Option<Box<dyn UIColor>>,
+    Option<u32>,
+);
+
+impl SVGWidget {
+    pub fn fill<C: UIColor + 'static>(mut self, color: C) -> Self {
+        self.1 = Some(Box::new(color));
+        self
+    }
+
+    pub fn stroke<C: UIColor + 'static>(mut self, color: C) -> Self {
+        self.2 = Some(Box::new(color));
+        self
+    }
+
+    pub fn stroke_width(mut self, width: u32) -> Self {
+        self.3 = Some(width);
+        self
+    }
+}
+
+impl Render for SVGWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for SVGWidget {
+    fn can_inherit(&self) -> bool {
+        false
+    }
+
+    fn base_class(&self) -> Vec<String> {
+        let mut ret = vec![];
+
+        if let Some(fill) = &self.1 {
+            ret.push(format!("fill-{}", fill.color_class()));
+        }
+
+        if let Some(stroke) = &self.2 {
+            ret.push(format!("stroke-{}", stroke.color_class()));
+        }
+
+        if let Some(stroke_width) = &self.3 {
+            ret.push(format!("stroke-[{stroke_width}px]"));
+        }
+
+        ret
+    }
+
+    fn extended_class(&self) -> Vec<String> {
+        let mut c = self.base_class();
+        c.extend_from_slice(&self.0.extended_class());
+        c
+    }
+
+    fn render_with_class(&self, _: &str) -> Markup {
+        html! {
+            svg class=(self.base_class().join(" ")) {
+                (self.0.as_ref())
+            }
+        }
+    }
+}