Shape Organic icon

Used to represent organic shapes on canvas. The Shape Organic icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 6 sizes from 16 to 48 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

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_shape_organic_24_regular.svg

Shape Organic icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <ShapeOrganic24Regular aria-label="Shape Organic" />;
}

Shape Organic icon in SVG

npm install @fluentui/svg-icons

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

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

Shape Organic icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Shape Organic icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.shape_organic_24_regular)

Shape Organic 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="&#xF0399;" FontSize="24" />

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

Shape Organic 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_shape_organic_24_regular"></i>

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

Shape Organic icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_shape_organic_24_regular

Shape Organic icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .shapeOrganic24Regular)

Shape Organic 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 Shape Organic 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 { ShapeOrganic24Regular, ShapeOrganic24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ShapeOrganic24Regular aria-label="Shape Organic" />;
}

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_shape_organic_24_regular.svg" width="24" height="24" alt="Shape Organic">

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="M16.8519 8.94568C16.5029 8.65876 16.0005 7.98364 16.0005 6.35C16.0005 5.27845 15.6592 4.43207 15.1201 3.78757C14.5922 3.15648 13.9081 2.75767 13.2699 2.50329C12.6298 2.24823 12.0004 2.12417 11.5384 2.06278C11.3054 2.03183 11.11 2.01618 10.9706 2.00824C10.8606 2.00198 10.7985 2.00015 10.7352 2L10.7339 2C8.46789 2 6.74536 2.62091 5.45547 3.59732C4.17381 4.56752 3.37083 5.84929 2.86811 7.09416C2.36606 8.33733 2.15281 9.56897 2.06329 10.4815C1.73488 13.8289 2.46488 17.7522 5.25136 19.9172C7.25986 21.4778 9.95578 22 12.7505 22C15.3258 22 17.6268 21.4251 19.304 20.1846C21.0111 18.922 22.0001 17.0202 22.0005 14.56C22.0005 12.2402 20.9125 10.8792 19.7938 10.1275C19.2493 9.76157 18.7096 9.54643 18.3081 9.42225C17.8273 9.27353 17.2524 9.27505 16.8519 8.94568ZM6.17168 18.7328C3.776 16.8714 3.27592 13.484 3.55612 10.6279C3.63676 9.80603 3.82713 8.72517 4.25897 7.65584C4.69013 6.58821 5.3513 5.55748 6.36081 4.7933C7.6224 3.8383 9.316 3.41648 10.8853 3.50582C10.9929 3.51194 11.1504 3.52442 11.3408 3.54972C11.7256 3.60083 12.2254 3.70177 12.7145 3.89671C13.2054 4.09233 13.6505 4.36852 13.9695 4.74993C14.2773 5.11793 14.5005 5.62155 14.5005 6.35C14.5005 8.31636 15.1231 9.46624 15.8992 10.1043C16.2738 10.4123 16.6516 10.5729 16.9408 10.6565C17.2446 10.7442 17.5618 10.7615 17.8648 10.8553C18.1665 10.9486 18.5642 11.1084 18.9572 11.3725C21.562 13.123 20.6369 17.3331 18.412 18.9787C17.0779 19.9654 15.1293 20.5 12.7505 20.5C10.1002 20.5 7.79906 19.9972 6.17168 18.7328Z" fill="currentColor"/></svg>

Details

NameShape Organic
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_shape_organic_24_regular.svg
Filled fileic_fluent_shape_organic_24_filled.svg
React (Regular)ShapeOrganic16Regular, ShapeOrganic20Regular, ShapeOrganic24Regular, ShapeOrganic28Regular, ShapeOrganic32Regular, ShapeOrganic48Regular
React (Filled)ShapeOrganic16Filled, ShapeOrganic20Filled, ShapeOrganic24Filled, ShapeOrganic28Filled, ShapeOrganic32Filled, ShapeOrganic48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

shape

Related icons