@davaux/tabler-icons

Tabler Icons is an open-source icon library with over 5,500 SVG icons across outline and filled variants. This package renders them as inline SVG strings on the server — no icon fonts, no client JavaScript, no external image requests.

Installation

npm install @davaux/tabler-icons

Basic usage

import { TablerIcon } from '@davaux/tabler-icons'

export default definePage(() => (
  <nav>
    <TablerIcon name="home" />
    <TablerIcon name="user" />
    <TablerIcon name="settings" size={20} stroke={1.5} />
    <TablerIcon name="heart" variant="filled" color="crimson" />
  </nav>
))

Props

Prop	Type	Default	Description
`name`	`string`	required	Kebab-case icon name — matches the Tabler Icons filename (e.g. `'home'`, `'arrow-right'`, `'brand-github'`)
`variant`	`'outline' \| 'filled'`	`'outline'`	Line-art or solid-fill style
`size`	`number \| string`	`24`	Width and height in pixels
`stroke`	`number`	`2`	Stroke width — outline icons only
`color`	`string`	`'currentColor'`	Any CSS color value
`class`	`string`	—	Extra CSS class names appended to the `<svg>`
`className`	`string`	—	Alias for `class`

color is injected as style="color:…" on the <svg> element, so currentColor propagates to both stroke and fill attributes. This also means you can tint icons with plain CSS on any ancestor: color: var(--dv-color-blue-6) will apply to all child TablerIcons that use the default currentColor.

Examples

Outline (default)

home

search

user

settings

bell

heart

star

brand-github

Filled variant

Pass variant="filled" to use solid-fill icons where they exist:

<TablerIcon name="heart" variant="filled" />
<TablerIcon name="star" variant="filled" />
<TablerIcon name="bell" variant="filled" />

heart

star

bell

bookmark

Size and stroke width

size sets both width and height. stroke controls line thickness on outline icons — thinner strokes suit larger display sizes:

<TablerIcon name="settings" size={16} stroke={2} />    {/* small */}
<TablerIcon name="settings" size={24} stroke={2} />    {/* default */}
<TablerIcon name="settings" size={40} stroke={1.5} />  {/* large, thinner stroke */}
<TablerIcon name="settings" size={64} stroke={1} />    {/* display */}

16px

24px

40px 1.5

64px 1

Color

Pass any CSS color to color. You can also leave it as currentColor (the default) and control the color from CSS on a parent element:

<TablerIcon name="circle-check" color="var(--dv-color-green-6)" />
<TablerIcon name="alert-triangle" color="var(--dv-color-yellow-6)" />
<TablerIcon name="circle-x" color="var(--dv-color-red-6)" />

{/* or via CSS on the parent */}
<span style={{ color: 'steelblue' }}>
  <TablerIcon name="info-circle" />
</span>

Finding icons

Browse and search the full collection at tabler.io/icons →

Icon names map directly to filenames in the package. The icon shown as arrow-right in the gallery is name="arrow-right". Filled variants are available for a subset of icons — if variant="filled" produces no output, an outline-only icon was requested.