mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
49 lines
2.2 KiB
Plaintext
49 lines
2.2 KiB
Plaintext
---
|
|
title: Tabler Illustrations
|
|
order: 3
|
|
description: Customizable SVG illustrations for web and mobile designs, in light and dark variants.
|
|
summary: 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.
|
|
---
|
|
|
|
import { Image } from 'astro:assets'
|
|
import { site } from '@shared/lib/site'
|
|
import coverLight from '../../images/cover-illustrations.jpg'
|
|
import coverDark from '../../images/cover-illustrations-dark.jpg'
|
|
|
|
<figure>
|
|
<Image src={coverLight} alt="Tabler Illustrations" class="hide-theme-dark" width={800} densities={[1, 2]} loading="eager" />
|
|
<Image src={coverDark} alt="Tabler Illustrations" class="hide-theme-light" width={800} densities={[1, 2]} loading="eager" />
|
|
</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).
|