The Tabler inner shadow bottom left icon visually represents a subtle shadow cast inwards from the bottom-left edge, often used to create a sense of depth or highlight an element's inset nature.
Common uses
- Indicating a pressed or active button state.
- Adding depth to cards or modal windows.
- Styling form input fields to appear recessed.
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconInnerShadowBottomLeft } from '@tabler/icons-react';
<IconInnerShadowBottomLeft size={24} stroke={2} />Styles
Tabler ships this icon in 2 styles — each its own import:
outline
<IconInnerShadowBottomLeft size={24} stroke={2} />filled
<IconInnerShadowBottomLeftFilled size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- Design
- Keywords
- shapecircledownsouthwestinnershadowbottomleftcreativedesigninset shadowrecessed effectshadow down leftdesign element
FAQ
- What is the purpose of the inner shadow bottom left icon?
- This icon is typically used in UI design to visually suggest that an element is pressed inwards or recessed, adding a subtle depth effect.
- How do I use this icon in React?
- You can import and use it in your React application with: import { IconInnerShadowBottomLeft } 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 →