> For the complete documentation index, see [llms.txt](https://phoenixcoded.gitbook.io/saasable/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phoenixcoded.gitbook.io/saasable/ui-kit-v1.1.0/theming/icon.md).

# Icon

We have implemented custom SVG icons along with Tabler fill and stroke icons using the SVGSprite method.

Each method for adding SVG icons varies slightly. You can explore all available icons on our [icon page](https://www.saasable.io/sections/icon) 

You can manage all icons in one place using a common component, `SvgIcon.tsx` , located in the `components` folder.

## Props Details

<table><thead><tr><th width="178.33333333333331">Prop</th><th width="215">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>name</strong></td><td><code>string</code></td><td>Keep always Svg ID value = name of icon value</td></tr><tr><td><strong>size</strong></td><td><code>number</code> (optional)</td><td>Adjusts the size of the SVG icon. The default size is set to 24</td></tr><tr><td><strong>type</strong></td><td><code>IconType</code></td><td>Currently, the default value is <code>IconType.STROKE</code> set for the tabler outline icon. Another type is <code>IconType.FILL</code> for tabler fill icon  &#x26; <code>IconType.CUSTOM</code> for custom icon svg adding</td></tr><tr><td><strong>color</strong></td><td><code>string</code> (optional)</td><td>To change color of the svg icon</td></tr><tr><td><strong>stroke</strong></td><td><code>number</code> (optional)</td><td>Adjusts the stroke width of the SVG icon. This prop is <strong>not applied</strong> when the icon type is <code>IconType.FILL</code>.</td></tr><tr><td><strong>twoToneColor</strong></td><td><code>string</code> (optional)</td><td>To change seondary color of the svg icon which is <strong>only used</strong> in <code>IconType.CUSTOM</code> icon type or twotone icon</td></tr></tbody></table>

<details>

<summary>How to use Icons dynamically?</summary>

Icons can be set dynamically based on conditions in SaasAble. you need to pass the type as Custom (`IconType.CUSTOM`). Check the following code snippet where it is being used:

**Note**: your name should already exist here for the dynamic icon: *public/assets/svg/sprite-custom.svg*

```typescript
// @project
import { IconType } from '@/enum';

export const feature6 = {
  // other data...
  features: [
    {
      icon: { name: 'custom-data', type: IconType.CUSTOM }, // Icon data
      title: 'Bring your Data Model',
      content: 'Collect relevant customer information efficiently.'
    },
    ...
  ]
};
```

</details>