All Tabler Illustrations in the light and the dark variant, with the file name under each one.

Every illustration comes in a light and a dark variant, drawn to sit on the matching page background. The name under each one is the file name, the same in every format the package ships - see the folder structure for where each format lives.

Using an illustration

The simplest way is an img element pointing at the SVG file:

<img src="/illustrations/light/undraw-empty.svg" alt="" class="w-100" />

Leave alt empty when the illustration only decorates a block that already has a heading and text, which is the usual case in an empty state. Write real alt text only when the picture carries information nothing else on the page does.

Following the color mode

To switch variants with the page, place both files and let Tabler hide the one that does not apply. That is what this page does:

<img src="/illustrations/light/undraw-empty.svg" alt="" class="hide-theme-dark" />
<img src="/illustrations/dark/undraw-empty.svg" alt="" class="hide-theme-light" />

The svg-css-autodark folder holds a single-file version that follows the color mode on its own, with no second image. See customization for how it works and how to recolor it.

All illustrations

You can buy Tabler Illustrations at tabler.io/illustrations.