The Tabler info triangle icon depicts a triangle with an exclamation mark, commonly used to signify important information, warnings, or alerts within a user interface.
Common uses
- Displaying critical alerts or warnings.
- Highlighting important details or facts.
- Indicating a required field with a tooltip.
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconInfoTriangle } from '@tabler/icons-react';
<IconInfoTriangle size={24} stroke={2} />Styles
Tabler ships this icon in 2 styles — each its own import:
outline
<IconInfoTriangle size={24} stroke={2} />filled
<IconInfoTriangleFilled size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- System
- Keywords
- detailsdatafactthreepointwarningalertcautionnotifyinfosystemtrianglewarning iconalert iconexclamation triangleinformation symbol
FAQ
- What is the purpose of the info triangle icon?
- It's used to draw attention to important information, warnings, or alerts, helping users understand critical context.
- How do I use the info triangle icon in React?
- Import it using `import { IconInfoTriangle } from '@tabler/icons-react';` and then render it as a component: `<IconInfoTriangle />`.
- What is the license for this icon?
- The Tabler icon library, including the info triangle 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 →