Fluent Icons

Circle Shadow icon

Used to represent image editing. The Circle Shadow icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_circle_shadow_24_regular.svg

Circle Shadow icon in React

npm install @fluentui/react-icons

import { CircleShadow24Regular } from "@fluentui/react-icons";

export function Example() {
  return <CircleShadow24Regular aria-label="Circle Shadow" />;
}

Circle Shadow icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/circle_shadow_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/circle_shadow_24_regular.svg" width="24" height="24" alt="Circle Shadow">

Circle Shadow icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.CircleShadow())" />

Circle Shadow icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.circle_shadow_24_regular)

Circle Shadow icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF05C6;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF05C6;" FontSize="24" />

Circle Shadow icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_circle_shadow_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f05c6";
  font-size: 24px;
}

Circle Shadow icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_circle_shadow_24_regular" />

// Kotlin
R.drawable.ic_fluent_circle_shadow_24_regular

Circle Shadow icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .circleShadow24Regular)

Circle Shadow icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameCircle Shadow
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_circle_shadow_24_regular.svg
Filled fileic_fluent_circle_shadow_24_filled.svg
React (Regular)CircleShadow20Regular, CircleShadow24Regular
React (Filled)CircleShadow20Filled, CircleShadow24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

editimagephotocameralight

Related icons

Circle HighlightCircle Half FillCircle ImageImage CircleImage ShadowLightbulb CirclePlay Circle HintSquare ShadowAdd CircleAdd Subtract CircleArrow Circle DownArrow Circle Down Double