A set of over 6000 free MIT-licensed high-quality SVG icons for you to use in your web projects.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
Paweł Kuna 4a4054d840
Speed up declaration bundling for JS framework packages (#1618)
7 days ago
..
src Run tests in CI, fix ReactSVG type rot, add type and RSC guards (#1579) 3 weeks ago
.gitignore Generate dynamic imports for icons-react (#1081) 2 years ago
README.md Refresh package READMEs: fix wrong props, broken links and inconsistent structure (#1589) 1 month ago
build.mjs Speed up declaration bundling for JS framework packages (#1618) 7 days ago
package.json Release 3.48.0 3 weeks ago
rollup.config.mjs Speed up declaration bundling for JS framework packages (#1618) 7 days ago
setupVitest.js Tabler Icons 3.0 (#993) 3 years ago
test.spec.tsx Run tests in CI, fix ReactSVG type rot, add type and RSC guards (#1579) 3 weeks ago
tsconfig.json Improve build speed (#1382) 1 year ago
vitest.config.ts Tabler Icons 3.0 (#993) 3 years ago

README.md

Tabler Icons for React

Tabler Icons

Implementation of the Tabler Icons library for React applications.

Browse all icons at tabler.io →

Latest release License

Sponsors

If you want to support our project and help us grow it, you can become a sponsor on GitHub or donate on PayPal.

Tabler sponsors

Installation

npm install @tabler/icons-react
yarn add @tabler/icons-react
pnpm add @tabler/icons-react

You can also download the latest release from GitHub.

Usage

The package is built with ES modules, so unused icons are tree-shaken from your bundle. Each icon is exported as a component.

import { IconArrowLeft } from '@tabler/icons-react';

const App = () => {
  return <IconArrowLeft />;
};

export default App;

Pass props to adjust the icon:

<IconArrowLeft color="red" size={48} stroke={1.5} />

Props

Name Type Default Description
size _number string_ 24
color string currentColor Stroke color for outline icons, fill color for filled icons
stroke _number string_ 2
title string – Adds a <title> element for accessibility
className string – Extra classes added to tabler-icon tabler-icon-{{name}}

Any other attribute is forwarded to the rendered <svg> element. Components forward refs to the <svg> element and ship with TypeScript declarations.

Contributing

Bug reports and icon requests are welcome in the issue tracker. Caught a mistake in this page? Edit it on GitHub.

License

Tabler Icons is licensed under the MIT License.