The Tabler inner shadow top left icon visually represents a subtle shadow cast from the top and left edges inward, commonly used to create a sense of depth or inset on UI elements.
Common uses
- Indicating a pressed or active state for buttons.
- Creating an inset effect for input fields or cards.
- Adding subtle depth to layered UI components.
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconInnerShadowTopLeft } from '@tabler/icons-react';
<IconInnerShadowTopLeft size={24} stroke={2} />Styles
Tabler ships this icon in 2 styles — each its own import:
outline
<IconInnerShadowTopLeft size={24} stroke={2} />filled
<IconInnerShadowTopLeftFilled size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- Design
- Keywords
- shapecircleupnorthwestinnershadowtopleftcreativedesigninset shadowrecessed effectshadow top westinner highlight
FAQ
- What is the purpose of the inner shadow top left icon?
- This icon is used to visually suggest an element is recessed or has a shadow cast inward from the top and left, adding depth to UI designs.
- How do I use this icon in React?
- You can import and use it in your React application with: import { IconInnerShadowTopLeft } from '@tabler/icons-react'
- What is the license for this icon?
- The Tabler icon library, including this 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 →