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.

Tabler Illustrations is a set of 130 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:

<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:

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

Preview the collection, check what is inside the package, learn how to customize the illustrations, and read the license terms.