diff --git a/docs/stories/docs/TailwindPreset.mdx b/docs/stories/docs/TailwindPreset.mdx
index 7acaac12..70867563 100644
--- a/docs/stories/docs/TailwindPreset.mdx
+++ b/docs/stories/docs/TailwindPreset.mdx
@@ -130,7 +130,7 @@ Congratulations you can now use all the tailwind classes used in the library
   fontFamily: {
     primary: ['IBM Plex Sans', 'Verdana', 'Arial', 'sans-serif'],
     secondary: ['Prestafont', 'Verdana', 'Arial', 'sans-serif'],
-    materialIcons: ['Material Icons Round']
+    materialIcons: ['Material Symbols Rounded']
   },
   fontSize: {
     xs: ['0.75rem', { lineHeight: '1.125rem' }],
diff --git a/packages/components/skeleton-loader/src/skeleton-loader.vue b/packages/components/skeleton-loader/src/skeleton-loader.vue
index 66303878..ce142a93 100644
--- a/packages/components/skeleton-loader/src/skeleton-loader.vue
+++ b/packages/components/skeleton-loader/src/skeleton-loader.vue
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="tag"
-    class="puik-skeleton-loader material-icons-round"
+    class="puik-skeleton-loader"
     :class="[`puik-skeleton-loader--${variant}`]"
     :style="{ width, height }"
   />
diff --git a/packages/theme/src/puik-skeleton-loader.scss b/packages/theme/src/puik-skeleton-loader.scss
index 3e1c4824..35a05ea8 100755
--- a/packages/theme/src/puik-skeleton-loader.scss
+++ b/packages/theme/src/puik-skeleton-loader.scss
@@ -1,5 +1,5 @@
 .puik-skeleton-loader {
-  @apply rounded w-full text-primary-500 text-2xl;
+  @apply font-materialIcons rounded w-full text-primary-500 text-2xl;
 
   background: linear-gradient(
     90deg,