---
title: Preview
summary: 'Tabler Illustrations offers 80 illustrations in two themes: light and dark. You can use them in your projects to enhance the visual appeal and convey messages effectively.'
layout: '@layouts/DocsMdxLayout.astro'
---

import illustrations from '@data/illustrations.json'
export const allIllustrations = illustrations.sort()

Look at full list of illustrations below and see how they look. Find out more and purchase Tabler Illustrations at [our website]({{ site.homepage }}/illustrations).

<div class="row g-2 gy-6">
  {allIllustrations.map((illustration, i) => {
    return (
      <div class="col-6 col-md-4 col-lg-3 text-center">
        <img src={`/static/illustrations/light/${illustration}.png`} alt={illustration} class="hide-theme-dark" />
        <img src={`/static/illustrations/dark/${illustration}.png`} alt={illustration} class="hide-theme-light" />
        <code>{illustration}</code>
      </div>
    )
  })}
</div>
