The Tabler vignette icon depicts a darkening effect around the edges of an image, commonly used in UI to draw attention to the center or create an artistic frame.
Common uses
- Image editing tools
- Photo filter options
- Content framing elements
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconVignette } from '@tabler/icons-react';
<IconVignette size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- Design
- Keywords
- vignettephotoedgeframedarkeningeffectportraiteditinglensartisticdesignphoto edgeframe effectdarken borderlens effect
FAQ
- What does the vignette icon represent?
- It represents a visual effect that darkens the edges of an image, often used to focus attention on the subject or add an artistic touch.
- How do I use the vignette icon in React?
- You can import and use it like this: import { IconVignette } from '@tabler/icons-react'. Then render it as <IconVignette />.
- What is the license for this icon?
- The Tabler icons, including the vignette icon, are 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 →