diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94dfc5d..c9e2df7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,4 +18,5 @@
 - Scale classes added to Transform
 - New cursor pointer options added
 - Box sizing classes added
-- Outline classes added (width, color, style, offset)
\ No newline at end of file
+- Outline classes added (width, color, style, offset)
+- Svg classes added (fill, stroke, stroke-width)
\ No newline at end of file
diff --git a/index.js b/index.js
index fe2bcd8..df1d969 100644
--- a/index.js
+++ b/index.js
@@ -27,6 +27,7 @@ const animation = require('./lib/animation');
 const variables = require('./lib/variables');
 const filters = require("./lib/filters");
 const outline = require("./lib/outline");
+const svg = require("./lib/svg");
 module.exports = (opts = {}) => {
     return {
         postcssPlugin: 'postcss-primeflex',
@@ -61,6 +62,7 @@ module.exports = (opts = {}) => {
                 variables(atRule, _opts);
                 filters(atRule, _opts);
                 outline(atRule, _opts);
+                svg(atRule, _opts);
                 atRule.remove();
             }
         }
diff --git a/lib/svg.js b/lib/svg.js
new file mode 100644
index 0000000..2dceebc
--- /dev/null
+++ b/lib/svg.js
@@ -0,0 +1,41 @@
+const { styleClass } = require("./utils");
+
+module.exports = (root, opts) => {
+    const colorNames = ['blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'gray', 'red', 'primary'];
+    const colorShades = [50,100,200,300,400,500,600,700,800,900];
+
+    const fill = {
+        'fill-none': 'none',
+        'fill-inherit': 'inherit',
+        'fill-current': 'currentColor',
+        'fill-transparent': 'transparent',
+        'fill-white': '#ffffff',
+        'fill-black': '#000000',
+    };
+
+    const stroke = {
+        'stroke-none': 'none',
+        'stroke-inherit': 'inherit',
+        'stroke-current': 'currentColor',
+        'stroke-transparent': 'transparent',
+        'stroke-white': '#ffffff',
+        'stroke-black': '#000000',
+    };
+
+    const strokeWidth = {
+        'stroke-0': '0',
+        'stroke-1': '1',
+        'stroke-2': '2',
+    };
+
+    for (let color of colorNames) {
+        for (let cs of colorShades) {
+            fill['fill-' + color + '-' + cs] = 'var(--' + color + '-' + cs + ')';
+            stroke['stroke-' + color + '-' + cs] = 'var(--' + color + '-' + cs + ')';
+        }
+    }
+
+    styleClass('fill', fill, root, opts, true, true);
+    styleClass('stroke', stroke, root, opts, true, true);
+    styleClass('stroke-width', strokeWidth, root, opts, true, true);
+};