--- title: Preview order: 1 summary: All Tabler Illustrations in the light and the dark variant, with the file name under each one. description: Browse all Tabler Illustrations in light and dark themes. --- import illustrations from '@data/illustrations.json' export const allIllustrations = illustrations.sort() 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](/illustrations/contents) for where each format lives. ## Using an illustration The simplest way is an `img` element pointing at the SVG file: ```html ``` 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](/ui/components/empty). 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: ```html ``` The `svg-css-autodark` folder holds a single-file version that follows the color mode on its own, with no second image. See [customization](/illustrations/customization#autodark-mode) for how it works and how to recolor it. ## All illustrations You can buy Tabler Illustrations at [tabler.io/illustrations](https://tabler.io/illustrations).
{allIllustrations.map((illustration, i) => { return (
{illustration} {illustration} {illustration}
) })}