Circle Shadow icon
Used to represent image editing. The Circle Shadow icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Circle Shadow icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { CircleShadow24Regular, CircleShadow24Filled } from "@fluentui/react-icons";
export function Example() {
return <CircleShadow24Regular aria-label="Circle Shadow" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_circle_shadow_24_regular.svg" width="24" height="24" alt="Circle Shadow"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.441 20.3784L10.2822 17.2196C9.9893 16.9267 9.51443 16.9267 9.22153 17.2196C8.92864 17.5125 8.92864 17.9873 9.22153 18.2802L11.4219 20.4807C10.5853 20.4245 9.78184 20.2472 9.0289 19.9663L6.53219 17.4696C6.24325 17.1806 5.77721 17.1767 5.48349 17.4579C4.24545 15.9813 3.5 14.0777 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C14.0777 3.5 15.9813 4.24547 17.4579 5.48353C17.1787 5.77736 17.1832 6.24195 17.4715 6.53024L19.964 9.02267C20.2458 9.77615 20.4237 10.5803 20.4804 11.4178L18.2822 9.21958C17.9893 8.92669 17.5144 8.92669 17.2215 9.21958C16.9286 9.51247 16.9286 9.98734 17.2215 10.2802L20.3789 13.4376C20.2917 13.9494 20.1588 14.4456 19.9845 14.9219L17.2822 12.2196C16.9893 11.9267 16.5144 11.9267 16.2215 12.2196C15.9286 12.5125 15.9286 12.9873 16.2215 13.2802L19.2993 16.358C19.0678 16.7449 18.8064 17.1119 18.5183 17.4557L15.7822 14.7196C15.4893 14.4267 15.0144 14.4267 14.7215 14.7196C14.4286 15.0125 14.4286 15.4873 14.7215 15.7802L17.4578 18.5165C17.1141 18.8047 16.7473 19.0662 16.3605 19.2978L13.2822 16.2196C12.9893 15.9267 12.5144 15.9267 12.2215 16.2196C11.9286 16.5125 11.9286 16.9873 12.2215 17.2802L14.9247 19.9834C14.4486 20.1579 13.9526 20.291 13.441 20.3784ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/circle_shadow_24_regular.svg";Details
| Name | Circle Shadow |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_circle_shadow_24_regular.svg |
| Filled file | ic_fluent_circle_shadow_24_filled.svg |
| React components | CircleShadow24Regular, CircleShadow24Filled |
| License | MIT (© Microsoft Corporation) |