@tabler/core 1.0.0-beta22 → 1.0.0-beta24

package/docs/icons/index.mdx

@@ -1,100 +1,10 @@
 ---
 title: Tabler Icons
-description: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customisation options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
+summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customisation options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
+order: 2
+description: Over 5000 pixel-perfect icons for web design and development
 ---
 
-```html example centered separated
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-ghost" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7"></path>
-  <path d="M10 10l.01 0"></path>
-  <path d="M14 10l.01 0"></path>
-  <path d="M10 14a3.5 3.5 0 0 0 4 0"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-yin-yang" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
-  <path d="M12 3a4.5 4.5 0 0 0 0 9a4.5 4.5 0 0 1 0 9"></path>
-  <circle cx="12" cy="7.5" r=".5" fill="currentColor"></circle>
-  <circle cx="12" cy="16.5" r=".5" fill="currentColor"></circle>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
-</svg>
-```
-
-## Customize stroke
-
-The `stroke-width` property is a powerful tool for customizing icons. This property allows you to control the thickness of the stroke used to outline an icon, giving you precise control over its appearance. By adjusting the `stroke-width` property, you can make an icon more or less prominent, change its emphasis, or create unique visual effects. For example, a thinner stroke may be ideal for icons with intricate designs or fine details, while a thicker stroke can add visual weight and impact to simpler, bolder icons.
-
-All icons are designed by default with `2px` stroke.
-
-```html example centered separated
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 1">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
-  <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-  <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
-  <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
-  <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 1.5">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
-  <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-  <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
-  <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
-  <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 2">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
-  <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-  <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
-  <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
-  <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
-</svg>
-```
-
-```html
-<svg stroke-width="1" ...>
-   ...
-</svg>
-<svg stroke-width="1.5" ...>
-   ...
-</svg>
-<svg stroke-width="2" ...>
-   ...
-</svg>
-```
-
-## Filled version of icons
-
-```html example centered separated
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-bell-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z" stroke-width="0" fill="currentColor"></path>
-  <path d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z" stroke-width="0" fill="currentColor"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-diamond-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M18 4a1 1 0 0 1 .783 .378l.074 .108l3 5a1 1 0 0 1 -.032 1.078l-.08 .103l-8.53 9.533a1.7 1.7 0 0 1 -1.215 .51c-.4 0 -.785 -.14 -1.11 -.417l-.135 -.126l-8.5 -9.5a1 1 0 0 1 -.172 -1.067l.06 -.115l3.013 -5.022l.064 -.09a.982 .982 0 0 1 .155 -.154l.089 -.064l.088 -.05l.05 -.023l.06 -.025l.109 -.032l.112 -.02l.117 -.005h12zm-8.886 3.943a1 1 0 0 0 -1.371 .343l-.6 1l-.06 .116a1 1 0 0 0 .177 1.07l2 2.2l.09 .088a1 1 0 0 0 1.323 -.02l.087 -.09a1 1 0 0 0 -.02 -1.323l-1.501 -1.65l.218 -.363l.055 -.103a1 1 0 0 0 -.398 -1.268z" stroke-width="0" fill="currentColor"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-discount-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-shield-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M11.998 2l.118 .007l.059 .008l.061 .013l.111 .034a.993 .993 0 0 1 .217 .112l.104 .082l.255 .218a11 11 0 0 0 7.189 2.537l.342 -.01a1 1 0 0 1 1.005 .717a13 13 0 0 1 -9.208 16.25a1 1 0 0 1 -.502 0a13 13 0 0 1 -9.209 -16.25a1 1 0 0 1 1.005 -.717a11 11 0 0 0 7.531 -2.527l.263 -.225l.096 -.075a.993 .993 0 0 1 .217 -.112l.112 -.034a.97 .97 0 0 1 .119 -.021l.115 -.007zm3.71 7.293a1 1 0 0 0 -1.415 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
-</svg>
-```
-
 ## Browse icons
 
 Tabler Icons is a comprehensive icon library that features over <IconsCount rounded /> high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.

package/docs/icons/libraries/index.mdx

@@ -0,0 +1,5 @@
+---
+title: Libraries
+description: Explore Tabler Icons libraries.
+summary: The libraries section offers various integrations of Tabler Icons for popular frameworks and technologies, making it easy to incorporate icons into any project.
+---

package/docs/icons/{preact.mdx → libraries/preact.mdx}

@@ -1,8 +1,10 @@
 ---
-title: Tabler Icons for Preact
+title: Preact
+description: Tabler Icons library for Preact framework.
+summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-preact.png)
+![](/docs/icons/package-preact.png)
 
 ## Installation
 

package/docs/icons/{react.mdx → libraries/react.mdx}

@@ -1,8 +1,10 @@
 ---
-title: Tabler Icons for React
+title: React
+description: Tabler Icons library for React framework.
+summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-react.png)
+![](/docs/icons/package-react.png)
 
 ## Installation
 
@@ -14,7 +16,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
 
 It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
 
-```js
+```jsx
 import { IconArrowLeft } from '@tabler/icons-react';
 
 const App = () => {

package/docs/icons/{solidjs.mdx → libraries/solidjs.mdx}

@@ -1,8 +1,11 @@
 ---
-title: Tabler Icons for SolidJS
+title: SolidJS
+description: Tabler Icons library for SolidJS framework.
+summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-solidjs.png)
+![](/docs/icons/package-solidjs.png)
+
 
 ## Installation
 

package/docs/icons/{svelte.mdx → libraries/svelte.mdx}

@@ -1,8 +1,11 @@
 ---
-title: Tabler Icons for Svelte
+title: Svelte
+description: Tabler Icons library for Svelte framework.
+summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svelte.png)
+![](/docs/icons/package-svelte.png)
+
 
 ## Installation
 

package/docs/icons/{vue.mdx → libraries/vue.mdx}

@@ -1,8 +1,11 @@
 ---
-title: Tabler Icons for Vue
+title: Vue
+description: Tabler Icons library for Vue framework.
+summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-vue.png)
+![](/docs/icons/package-vue.png)
+
 
 ## Installation
 
@@ -20,12 +23,14 @@ All icons are Vue components that contain SVG elements. So any icon can be impor
 </template>
 
 <script>
-// Returns Vue component
-import { IconHome } from '@tabler/icons-vue';
-
-export default {
-  components: { IconHome }
-};
+  // Returns Vue component
+  import { IconHome } from '@tabler/icons-vue';
+
+  export default {
+    components: {
+      IconHome
+    }
+  };
 </script>
 ```
 

package/docs/icons/{webfont.mdx → libraries/webfont.mdx}

@@ -1,8 +1,11 @@
 ---
 title: Webfont
+description: Tabler Icons as a webfont.
+summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-webfont.png)
+![](/docs/icons/package-webfont.png)
+
 
 ## Installation
 

package/docs/icons/plugins/figma.mdx

@@ -0,0 +1,15 @@
+---
+title: Figma plugin
+description: Use Tabler Icons directly in Figma.
+summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow.
+---
+
+![Tabler Figma Plugin](/docs/icons/figma-plugin.png)
+
+The Tabler Icons Figma plugin is an essential tool for designers looking to enhance their workflow. It provides seamless access to a comprehensive library of high-quality, customizable icons directly within Figma. Whether you're designing dashboards, websites, or mobile apps, this plugin allows you to quickly search, preview, and integrate Tabler Icons into your projects, saving time and ensuring a consistent, modern aesthetic.
+
+## Usage 
+
+Using the plugin is simple: install it from the Figma community, launch it within your design file, and search for the desired icon by keyword. Once you’ve found the perfect icon, click to insert it into your design. You can easily customize the icon’s size, color, and stroke weight to fit your specific needs, making it a versatile addition to your design toolkit.
+
+<BlogButton href="https://www.figma.com/community/plugin/1169807996149376642/Tabler-Icons">Download Plugin</BlogButton>

package/docs/icons/plugins/index.mdx

@@ -0,0 +1,4 @@
+---
+title: Plugins
+description: Icon plugins for seamless integration.
+---

package/docs/icons/{eps.mdx → static-files/eps.mdx}

@@ -1,8 +1,10 @@
 ---
 title: EPS version
+description: Download Tabler Icons in EPS format.	
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-eps.png)
+![](/docs/icons/package-eps.png)
+
 
 ## Installation
 

package/docs/icons/static-files/index.mdx

@@ -0,0 +1,5 @@
+---
+title: Static files
+description: Download static file formats of icons.
+summary: Static files provide multiple formats of Tabler Icons, including EPS, PDF, PNG, and SVG, offering flexibility for different design and development workflows.
+---

package/docs/icons/{pdf.mdx → static-files/pdf.mdx}

@@ -1,8 +1,10 @@
 ---
 title: PDF version
+description: Download Tabler Icons in PDF format.
 ---
 
-![Tabler icon and PDF icon merging with npm command to install](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-pdf.png)
+![](/docs/icons/package-pdf.png)
+
 
 ## Installation
 

package/docs/icons/static-files/png.mdx

@@ -0,0 +1,31 @@
+---
+title: PNG version
+description: Download Tabler Icons in PNG format.
+---
+
+![](/docs/icons/package-png.png)
+
+
+## Installation
+
+<TabsPackage name="@tabler/icons-png" />
+
+or just [download from Github](https://github.com/tabler/tabler-icons/releases).
+
+All PNG files are stored in `icons` subdirectory.
+
+## CDN
+
+Replace `$ICONS_VERSION` with `latest` or any specific version you need.
+
+#### Outline version
+
+```html
+<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/outline/home.png" />
+```
+
+#### Filled version
+
+```html
+<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/filled/home.png" />
+```

package/docs/icons/{svg.mdx → static-files/svg.mdx}

@@ -1,8 +1,9 @@
 ---
 title: SVG version
+description: Download Tabler Icons in SVG format.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svg.png)
+![](/docs/icons/package-svg.png)
 
 ## Installation
 
@@ -28,18 +29,7 @@ You can paste the content of the icon file into your HTML code to display it on
 
 ```html
 <a href="">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="icon icon-tabler icon-tabler-disabled"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.25"
-    stroke="currentColor"
-    fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-disabled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     ...
   </svg>
   Click me
@@ -50,10 +40,10 @@ Thanks to that, you can change the size, color and the `stroke-width` of the ico
 
 ```css
 .icon-tabler {
-  color: red;
-  width: 32px;
-  height: 32px;
-  stroke-width: 1.25;
+color: red;
+width: 32px;
+height: 32px;
+stroke-width: 1.25;
 }
 ```
 
@@ -69,6 +59,16 @@ Add an icon to be displayed on your page with the following markup (`activity` i
 
 ## CDN
 
+Replace `$ICONS_VERSION` with `latest` or any specific version you need.
+
+#### Outline version
+
+```html
+<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/outline/home.svg" />
+```
+
+#### Filled version
+
 ```html
-<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/home.svg" />
+<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/filled/home.svg" />
 ```

package/docs/illustrations/index.mdx

@@ -0,0 +1,8 @@
+---
+title: Tabler Illustrations
+order: 3
+description: Customizable illustrations for modern web and mobile designs.
+summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
+---
+
+![](/docs/cover-illustrations.png) 

package/docs/illustrations/introduction/contents.mdx

@@ -0,0 +1,77 @@
+---
+title: Contents
+description: Explore Tabler Illustrations folder structure
+summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
+---
+
+The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.
+
+## Folder Structure
+
+Once downloaded, unzip the compressed folder and you’ll see something like this:
+
+```
+tabler-illustrations/
+├── eps/
+|	├── dark/
+|	└── light/
+├── figma/ 
+├── pdf/ 
+|  ├── dark/
+|  └── light/
+├── png/ 
+|  ├── dark/
+|  └── light/
+├── png-background/ 
+|	├── dark/
+|	└── light/
+├── svg/ 
+|  ├── dark/
+|  └── light/
+├── svg-css-autodark/ 
+└── svg-css-variables/
+ 	├── dark/
+ 	└── light/
+```
+
+## Understanding the File Structure in Tabler Illustrations
+
+The **Tabler Illustrations** package is organized into a clear and efficient folder structure to streamline the use of its high-quality assets. Below is a breakdown of its key directories:
+
+### 1. Vector Files: `eps/`
+This folder contains EPS files for scalable vector illustrations.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 2. Design File: `figma/`
+This folder contains a Figma file, perfect for designers who work directly in Figma.
+
+### 3. Document Files: `pdf/`
+This folder contains PDF files, ideal for print or presentation use.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 4. Transparent Images: `png/`
+This folder stores PNG files with transparent backgrounds at 1600 × 1200px resolution.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 5. Background Images: `png-background/`
+This folder contains PNG files with a dark background for enhanced contrast.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 6. Scalable Vector Graphics: `svg/`
+This folder includes SVG files for scalable and customizable vector graphics.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 7. Adaptive Graphics: `svg-css-autodark/`
+This folder contains SVG files prepared to automatically adjust their colors based on user settings, providing a dynamic and adaptive visual experience.
+
+### 8. Themed Graphics: `svg-css-variables/`
+This folder contains SVG files using CSS variables for flexible theming.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+This structure ensures easy access to various formats and themes, making Tabler Illustrations a versatile tool for developers and designers alike.