# Tabler Illustrations

> Tabler Illustrations is a set of SVG illustrations in light and dark variants, with CSS variables for recoloring and exports for print and design tools.

Customizable SVG illustrations for web and mobile designs, in light and dark variants.

Source: https://docs.tabler.io/illustrations

---

<figure>
	
	
</figure>

Tabler Illustrations is a set of { site.illustrationsCount } illustrations for empty states, error pages, onboarding screens and marketing sections. Every illustration comes in a light and a dark variant, so it fits both color modes of your interface.

## What's inside

Each illustration ships in several formats, all included in one package:

- **SVG**: the primary format for the web, in `light/` and `dark/` variants.
- **SVG with CSS variables**: colors exposed as `--tblr-illustrations-*` custom properties, so you can re-color the artwork from CSS.
- **SVG with auto dark mode**: one file that switches between light and dark styling on its own, based on the page theme.
- **PNG**: raster exports, with and without a background.
- **EPS and PDF**: vector files for print and design tools.
- **Figma**: a source file for editing the artwork directly.

## Quick start

Embed an illustration like any other image:

```html
<img src="illustrations/svg/light/boy-girl.svg" alt="" width="400" height="300" />
```

To match the artwork to your brand, use the CSS-variables version and override its custom properties - for example the primary color and the skin tone:

```css
:root {
  --tblr-illustrations-primary: #066fd1;
  --tblr-illustrations-skin: #ffcb9d;
}
```

[Preview the collection](/illustrations/preview), check [what is inside the package](/illustrations/contents), learn how to [customize the illustrations](/illustrations/customization), and read the [license terms](/illustrations/license).