The Tabler magnet icon depicts a horseshoe magnet, commonly used to represent concepts related to attraction, magnetism, or strong influence in UI design.
Common uses
- Attraction or connection features
- Highlighting important or 'sticky' content
- Representing magnetic fields or forces
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconMagnet } from '@tabler/icons-react';
<IconMagnet size={24} stroke={2} />Styles
Tabler ships this icon in 2 styles — each its own import:
outline
<IconMagnet size={24} stroke={2} />filled
<IconMagnetFilled size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- Design
- Keywords
- magnetic fieldpoleironattractmagnetdesign
FAQ
- What does the magnet icon represent?
- It visually signifies attraction, magnetic fields, or the concept of drawing something in.
- How do I use the magnet icon in React?
- Import it from '@tabler/icons-react' like this: import { IconMagnet } from '@tabler/icons-react'.
- What is the license for the Tabler magnet icon?
- The Tabler icon set, including the magnet icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Tabler.
Looking for something else? Search Tabler and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →