Home/Libraries/Radix Icons/shadow-outer

Radix Icons

ShadowOuterIcon

License: MITCommercial Safe

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" width="256" height="256" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".05" fill-rule="evenodd" clip-rule="evenodd" d="M12.1398 3.88617C13.8553 4.94159 15 6.83701 15 9.00001C15 12.3137 12.3137 15 8.99999 15C6.84348 15 4.95293 13.8621 3.89566 12.1552L4.32073 11.8919C5.29066 13.4578 7.02373 14.5 8.99999 14.5C12.0375 14.5 14.5 12.0375 14.5 9.00001C14.5 7.01781 13.4515 5.28027 11.8778 4.31203L12.1398 3.88617Z" fill="#818cf8"/><path opacity=".2" fill-rule="evenodd" clip-rule="evenodd" d="M12.851 5.07321C13.8684 6.07106 14.5 7.46199 14.5 9C14.5 12.0375 12.0375 14.5 9.00001 14.5C7.46212 14.5 6.07129 13.8685 5.07346 12.8513L5.4304 12.5011C6.33807 13.4264 7.60183 14 9.00001 14C11.7614 14 14 11.7614 14 9C14 7.60171 13.4263 6.33786 12.5009 5.43017L12.851 5.07321Z" fill="#818cf8"/><path opacity=".35" fill-rule="evenodd" clip-rule="evenodd" d="M13.3021 6.4507C13.7455 7.19736 14 8.06934 14 9C14 11.7614 11.7614 14 8.99999 14C8.04865 14 7.15865 13.7341 6.40115 13.2723L6.66139 12.8454C7.34272 13.2607 8.14303 13.5 8.99999 13.5C11.4852 13.5 13.5 11.4853 13.5 9C13.5 8.16163 13.271 7.37752 12.8722 6.70598L13.3021 6.4507Z" fill="#818cf8"/><path opacity=".5" fill-rule="evenodd" clip-rule="evenodd" d="M13.3744 7.94022C13.4565 8.28031 13.5 8.63525 13.5 9.00001C13.5 11.4853 11.4852 13.5 8.99997 13.5C8.61098 13.5 8.23316 13.4506 7.87262 13.3576L7.99753 12.8734C8.31762 12.956 8.65347 13 8.99997 13C11.2091 13 13 11.2091 13 9.00001C13 8.67509 12.9613 8.35953 12.8884 8.05757L13.3744 7.94022Z" fill="#818cf8"/><path opacity=".65" fill-rule="evenodd" clip-rule="evenodd" d="M12.9155 9.82134C12.5898 11.3813 11.3562 12.6072 9.79205 12.9215L9.69354 12.4313C11.0613 12.1565 12.1413 11.0834 12.4261 9.71916L12.9155 9.82134Z" fill="#818cf8"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1.27707 7.50253C1.27707 4.06456 4.0641 1.27753 7.50207 1.27753C10.94 1.27753 13.7271 4.06456 13.7271 7.50253C13.7271 10.9405 10.94 13.7275 7.50207 13.7275C4.0641 13.7275 1.27707 10.9405 1.27707 7.50253ZM7.50207 2.22753C4.58877 2.22753 2.22707 4.58923 2.22707 7.50253C2.22707 10.4158 4.58877 12.7775 7.50207 12.7775C10.4153 12.7775 12.7771 10.4158 12.7771 7.50253C12.7771 4.58923 10.4153 2.22753 7.50207 2.22753Z" fill="#818cf8"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Dashboard

Analytics

Settings

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @radix-ui/react-icons) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. ShadowOuterIconIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **MIT** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.