@tabler/icons-react

What is @tabler/icons-react?

@tabler/icons-react is a React library that provides a collection of customizable SVG icons. These icons are designed to be simple, consistent, and easily integrated into React applications. The package offers a wide range of icons that can be used for various purposes such as UI elements, buttons, and navigation.

What are @tabler/icons-react's main functionalities?

Basic Icon Usage

This feature allows you to import and use individual icons from the @tabler/icons-react package. The example demonstrates how to import the 'IconHome' component and use it within a React component.

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

function App() {
  return (
    <div>
      <IconHome />
    </div>
  );
}

export default App;

Customizing Icon Size

This feature allows you to customize the size of the icons. The example shows how to set the size of the 'IconHome' component to 48 pixels.

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

function App() {
  return (
    <div>
      <IconHome size={48} />
    </div>
  );
}

export default App;

Customizing Icon Color

This feature allows you to customize the color of the icons. The example demonstrates how to set the color of the 'IconHome' component to red.

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

function App() {
  return (
    <div>
      <IconHome color="red" />
    </div>
  );
}

export default App;

Combining Multiple Icons

This feature allows you to use multiple icons together. The example shows how to import and use both 'IconHome' and 'IconUser' components within a React component.

import { IconHome, IconUser } from '@tabler/icons-react';

function App() {
  return (
    <div>
      <IconHome />
      <IconUser />
    </div>
  );
}

export default App;

Other packages similar to @tabler/icons-react

react-icons

react-icons is a popular library that provides a wide range of icons from various icon sets, including Font Awesome, Material Design, and more. It offers a similar functionality to @tabler/icons-react but with a broader selection of icons from different sources.

fontawesome-svg-core

fontawesome-svg-core is part of the Font Awesome library, which is one of the most widely used icon libraries. It provides a comprehensive set of icons and allows for extensive customization. It is comparable to @tabler/icons-react in terms of customization options but offers a larger icon set.

README

Tabler Icons for React

Implementation of the Tabler Icons library for React applications.

Browse all icons at tabler-icons.io →

Sponsors

If you want to support my project and help me grow it, you can become a sponsor on GitHub or just donate on PayPal :)

Installation

yarn add @tabler/icons-react

or

npm install @tabler/icons-react

or

pnpm install @tabler/icons-react

or just download from Github.

How to use

It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.

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

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

export default App;

You can pass additional props to adjust the icon.

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

Props

name	type	default
size	Number	24
color	String	currentColor
stroke	Number	2

Contributing

For more info on how to contribute please see the contribution guidelines.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

License

Tabler Icons is licensed under the MIT License.

Sponsor Tabler