Fluent Icons

Design Ideas icon

Used in scenarios where ai makes design suggestions. The Design Ideas icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled and color 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
Design Ideas Color

Color

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

Design Ideas icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <DesignIdeas24Regular aria-label="Design Ideas" />;
}

Design Ideas icon in SVG

npm install @fluentui/svg-icons

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

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

Design Ideas icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Design Ideas icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.design_ideas_24_regular)

Design Ideas 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="&#xF357;" FontSize="24" />

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

Design Ideas 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_design_ideas_24_regular"></i>

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

Design Ideas icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_design_ideas_24_regular

Design Ideas icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .designIdeas24Regular)

Design Ideas 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 Design Ideas 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 { DesignIdeas24Regular, DesignIdeas24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DesignIdeas24Regular aria-label="Design Ideas" />;
}

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_design_ideas_24_regular.svg" width="24" height="24" alt="Design Ideas">

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="M6 2.75001C6 2.4617 5.83474 2.19892 5.57489 2.07403C5.31504 1.94914 5.00661 1.98425 4.78148 2.16436C3.47066 3.21301 2.75829 4.13192 2.38341 4.93168C2.00034 5.74889 2 6.38181 2 6.75001C2 7.69552 2.47718 8.52959 3.20385 9.02452C3.01267 9.1848 2.84328 9.38248 2.69775 9.61803C2.22199 10.388 2 11.5645 2 13.2549C2 14.967 2.22997 17.023 2.60459 18.6644C2.79086 19.4806 3.02157 20.2335 3.29728 20.7994C3.43402 21.08 3.60052 21.3541 3.80783 21.5685C4.01286 21.7804 4.32965 22.0049 4.75 22.0049C5.17035 22.0049 5.48714 21.7804 5.69217 21.5685C5.89948 21.3541 6.06598 21.08 6.20272 20.7994C6.47843 20.2335 6.70914 19.4806 6.89541 18.6644C7.27003 17.023 7.5 14.967 7.5 13.2549C7.5 11.5645 7.27801 10.388 6.80225 9.61803C6.65672 9.38248 6.48733 9.1848 6.29615 9.02452C7.02282 8.52959 7.5 7.69552 7.5 6.75001C7.5 5.8234 7.0641 5.17579 6.73156 4.68175L6.70313 4.63948C6.31211 4.05763 6 3.57985 6 2.75001ZM3.5 6.75001V6.74875C3.5 6.4505 3.5 6.08374 3.74159 5.56833C3.9105 5.208 4.21053 4.74999 4.75381 4.19756C4.94673 4.71532 5.21705 5.11747 5.44592 5.45796L5.45814 5.47615C5.81518 6.00743 6 6.31097 6 6.75001C6 7.44036 5.44036 8.00001 4.75 8.00001C4.05964 8.00001 3.5 7.44036 3.5 6.75001ZM3.5 13.2549C3.5 11.6315 3.72572 10.808 3.97383 10.4065C4.08673 10.2237 4.19881 10.1372 4.29895 10.0886C4.40678 10.0363 4.54932 10.0049 4.75 10.0049C4.95068 10.0049 5.09322 10.0363 5.20105 10.0886C5.30119 10.1372 5.41327 10.2237 5.52617 10.4065C5.77428 10.808 6 11.6315 6 13.2549C6 14.8565 5.78226 16.8005 5.43302 18.3306C5.25736 19.1003 5.05711 19.726 4.85426 20.1424C4.81692 20.219 4.78194 20.2834 4.75 20.3369C4.71806 20.2834 4.68308 20.219 4.64574 20.1424C4.44289 19.726 4.24264 19.1003 4.06698 18.3306C3.71774 16.8005 3.5 14.8565 3.5 13.2549ZM8.48429 14.0771C8.95581 14.285 9.46552 14.4222 10 14.4753V12.25C10 10.4551 11.4551 9 13.25 9H15.4753C15.2245 6.47334 13.0927 4.5 10.5 4.5C9.64286 4.5 8.83609 4.71568 8.13101 5.09573C7.95086 4.70165 7.73971 4.38834 7.58281 4.15553L7.53312 4.0817C7.46675 3.98294 7.40731 3.89352 7.35439 3.81048C8.2865 3.29404 9.35891 3 10.5 3C13.9216 3 16.7257 5.64378 16.9811 9H18.75C20.5449 9 22 10.4551 22 12.25V17.75C22 19.5449 20.5449 21 18.75 21H13.25C11.4551 21 10 19.5449 10 17.75V15.9811C9.43648 15.9382 8.89305 15.8235 8.37885 15.646C8.42964 15.1161 8.46536 14.588 8.48429 14.0771ZM18.75 10.5H16.9236C16.4929 13.2891 14.2891 15.4929 11.5 15.9236V17.75C11.5 18.7165 12.2835 19.5 13.25 19.5H18.75C19.7165 19.5 20.5 18.7165 20.5 17.75V12.25C20.5 11.2835 19.7165 10.5 18.75 10.5ZM11.5 14.4C13.4591 14.0023 15.0023 12.4591 15.4 10.5H13.25C12.2835 10.5 11.5 11.2835 11.5 12.25V14.4Z" fill="currentColor"/></svg>

Details

NameDesign Ideas
StylesRegular (outlined), Filled, Color
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_design_ideas_24_regular.svg
Filled fileic_fluent_design_ideas_24_filled.svg
Color fileic_fluent_design_ideas_24_color.svg
React (Regular)DesignIdeas16Regular, DesignIdeas20Regular, DesignIdeas24Regular, DesignIdeas28Regular, DesignIdeas32Regular, DesignIdeas48Regular
React (Filled)DesignIdeas16Filled, DesignIdeas20Filled, DesignIdeas24Filled, DesignIdeas28Filled, DesignIdeas32Filled, DesignIdeas48Filled
React (Color)DesignIdeas16Color, DesignIdeas20Color, DesignIdeas24Color, DesignIdeas28Color, DesignIdeas32Color, DesignIdeas48Color
LicenseMIT (© Microsoft Corporation)

Keywords

aiedit

Related icons

Slide DesignAlign BottomAlign Center HorizontalAlign Center VerticalAlign End HorizontalAlign End VerticalAlign LeftAlign RightAlign Space Around HorizontalAlign Space Around VerticalAlign Space Between HorizontalAlign Space Between Vertical