The Tabler contrast icon visually represents adjusting the difference between the lightest and darkest areas of an image, commonly used in UI for photo editing or accessibility settings.
Common uses
- Photo editing tools (brightness/contrast slider)
- Accessibility settings (high contrast mode toggle)
- Image viewer options
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconContrast } from '@tabler/icons-react';
<IconContrast size={24} stroke={2} />Styles
Tabler ships this icon in 2 styles — each its own import:
outline
<IconContrast size={24} stroke={2} />filled
<IconContrastFilled size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- Photography
- Keywords
- editpaintphotocontrastcamerapicturecapturelensimageaccessibilitya11yhigh-contrastvisionwcagphotographyphoto edit
FAQ
- What does the contrast icon represent?
- It symbolizes the adjustment of tonal difference in an image, often related to photo editing or visual accessibility features.
- How do I use the contrast icon in React?
- Import it from '@tabler/icons-react' like this: import { IconContrast } from '@tabler/icons-react'. Then use it as a component: <IconContrast />.
- What is the license for the Tabler contrast icon?
- The Tabler icons, including contrast, are distributed 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 →