Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@tabler/icons
Advanced tools
A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.
@tabler/icons is an npm package that provides a collection of over 1000 customizable SVG icons. These icons are designed to be simple, consistent, and easily integrated into web projects. The package is particularly useful for developers looking to add high-quality icons to their applications without the need for custom design work.
Importing Icons
You can import specific icons from the @tabler/icons package to use in your project. This allows you to include only the icons you need, reducing the overall bundle size.
import { IconHome, IconUser } from '@tabler/icons';
Using Icons in React
The icons can be easily used within React components. This example demonstrates how to include the 'IconHome' icon in a simple React component.
import { IconHome } from '@tabler/icons';
function App() {
return (
<div>
<IconHome />
</div>
);
}
Customizing Icon Size and Color
The icons are highly customizable. You can change their size and color by passing props to the icon component. This example shows how to set the size to 48 pixels and the color to red.
import { IconHome } from '@tabler/icons';
function App() {
return (
<div>
<IconHome size={48} color="red" />
</div>
);
}
react-icons is a popular package that provides a wide range of icons from various icon libraries, including Font Awesome, Material Design, and more. It offers a similar level of customization and ease of use as @tabler/icons, but with a broader selection of icon styles.
heroicons is a set of free, MIT-licensed high-quality SVG icons for you to use in your web projects. It is similar to @tabler/icons in terms of simplicity and design consistency, but it offers a different style and a smaller selection of icons.
feather-icons is a collection of simply beautiful open-source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and readability. It is comparable to @tabler/icons in terms of design philosophy and ease of use.
A set of 5754 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.
Browse all icons at tabler-icons.io →
If you want to support my project and help me grow it, you can become a sponsor on GitHub or just donate on PayPal :)
yarn add @tabler/icons
or
npm install @tabler/icons
or
pnpm install @tabler/icons
or just download from Github.
All icons are built with SVG, so you can place them as <img>
, background-image
and inline in HTML code.
If you load an icon as an image, you can modify its size using CSS.
<img src="path/to/icon.svg" alt="icon title" />
You can paste the content of the icon file into your HTML code to display it on the page.
<a href="">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-disabled"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.25"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
...
</svg>
Click me
</a>
Thanks to that, you can change the size, color and the stroke-width
of the icons with CSS code.
.icon-tabler {
color: red;
width: 32px;
height: 32px;
stroke-width: 1.25;
}
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
Tabler Icons is licensed under the MIT License.
FAQs
A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.
The npm package @tabler/icons receives a total of 375,290 weekly downloads. As such, @tabler/icons popularity was classified as popular.
We found that @tabler/icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.