Design Ideas icon

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

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>

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/design_ideas_24_regular.svg";

Details

Keywords

aieditcompose