Иконка Design Ideas 20
fluent-color:design-ideas-20
Иконка Design Ideas 20 (fluent-color:design-ideas-20) — бесплатная SVG-иконка из набора Fluent UI System Color Icons от Microsoft Corporation. Она нарисована на сетке 20 × 20. Fluent UI System Color Icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах. Скопируйте её как код SVG, JSX, Vue или Svelte или скачайте SVG-файл.
- Набор
- Fluent UI System Color Icons
- Автор
- Microsoft Corporation
- Лицензия
- MIT
- Размер
- 20 × 20
- Теги
- designideas, idea
Код SVG
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="none"><circle cx="9" cy="8" r="5" fill="url(#SVGyuv4EK6u)"/><circle cx="9" cy="8" r="5" fill="url(#SVGzBQnFNdr)" fill-opacity=".6"/><circle cx="9" cy="8" r="5" fill="url(#SVGe10P9h8T)" fill-opacity=".6"/><rect width="9.016" height="9" x="8.984" y="8" fill="url(#SVGAczOocrl)" rx="2"/><path fill="url(#SVG06P03zyb)" fill-rule="evenodd" d="M14.031 8a5.047 5.047 0 0 1-5.047 5.031V10a2 2 0 0 1 2-2z" clip-rule="evenodd"/><path fill="url(#SVGYwamCdkZ)" fill-rule="evenodd" d="M14.031 8a5.047 5.047 0 0 1-5.047 5.031V10a2 2 0 0 1 2-2z" clip-rule="evenodd"/><path fill="url(#SVGhdl4MbsQ)" d="M6 11.578C6 15.797 4.938 18 4 18c-.812 0-2-1.828-2-6.422c0-3.922.895-4.547 2-4.547c.984 0 2 .328 2 4.547"/><path fill="url(#SVG16kd6cTv)" fill-opacity=".5" d="M6 11.578C6 15.797 4.938 18 4 18c-.812 0-2-1.828-2-6.422c0-3.922.895-4.547 2-4.547c.984 0 2 .328 2 4.547"/><path fill="url(#SVGkzCSBcxJ)" d="M6 11.578C6 15.797 4.938 18 4 18c-.812 0-2-1.828-2-6.422c0-3.922.895-4.547 2-4.547c.984 0 2 .328 2 4.547"/><path fill="url(#SVGTzpbUbBl)" fill-opacity=".7" d="M6 11.578C6 15.797 4.938 18 4 18c-.812 0-2-1.828-2-6.422c0-3.922.895-4.547 2-4.547c.984 0 2 .328 2 4.547"/><path fill="#fff" fill-opacity=".15" d="M2.046 10.183C2.242 7.5 3.042 7.03 4 7.03c.863 0 1.75.252 1.955 3.152a3.4 3.4 0 0 1-1.954.614a3.4 3.4 0 0 1-1.955-.614"/><path fill="url(#SVGWz1IcUOi)" d="M4.58 2.125a.5.5 0 0 1 .124.585a.3.3 0 0 0-.016.103c0 .063.015.183.166.333c.132.133.209.195.36.342c.13.124.267.27.39.453c.255.383.396.862.396 1.559C6 6.97 5.023 8 4 8S2 6.97 2 5.5c0-.72.302-1.507.689-2.106c.231-.39.556-.717.808-.937q.227-.201.476-.373a.5.5 0 0 1 .608.041"/><defs><radialGradient id="SVGyuv4EK6u" cx="0" cy="0" r="1" gradientTransform="rotate(-78.382 11.937 4.7)scale(13.528 13.5279)" gradientUnits="userSpaceOnUse"><stop offset=".222" stop-color="#4e46e2"/><stop offset=".578" stop-color="#625df6"/><stop offset=".955" stop-color="#e37dff"/></radialGradient><radialGradient id="SVGzBQnFNdr" cx="0" cy="0" r="1" gradientTransform="rotate(-17.281 36.305 -3.526)scale(5.46112 7.14855)" gradientUnits="userSpaceOnUse"><stop offset=".566" stop-color="#251fba"/><stop offset="1" stop-color="#5e51e4" stop-opacity="0"/></radialGradient><radialGradient id="SVGe10P9h8T" cx="0" cy="0" r="1" gradientTransform="matrix(4.9714 .7217 -.73772 5.08175 2.313 6.918)" gradientUnits="userSpaceOnUse"><stop offset=".566" stop-color="#251fba"/><stop offset="1" stop-color="#5e51e4" stop-opacity="0"/></radialGradient><radialGradient id="SVGAczOocrl" cx="0" cy="0" r="1" gradientTransform="rotate(42.413 -6.07 17.383)scale(10.6515 14.4653)" gradientUnits="userSpaceOnUse"><stop stop-color="#c354ff"/><stop offset=".158" stop-color="#b339f0"/><stop offset=".429" stop-color="#f24a9d"/><stop offset=".749" stop-color="#ff835c"/><stop offset="1" stop-color="#ffc470"/></radialGradient><radialGradient id="SVG16kd6cTv" cx="0" cy="0" r="1" gradientTransform="rotate(82.017 -1.732 5.377)scale(10.8764 24.5979)" gradientUnits="userSpaceOnUse"><stop offset=".5" stop-color="#dd3ce2" stop-opacity="0"/><stop offset="1" stop-color="#dd3ce2"/></radialGradient><radialGradient id="SVGTzpbUbBl" cx="0" cy="0" r="1" gradientTransform="rotate(-70.317 6.247 1.5)scale(5.47737 9.83255)" gradientUnits="userSpaceOnUse"><stop offset=".169" stop-color="#02888d"/><stop offset=".26" stop-color="#02888d" stop-opacity="0"/></radialGradient><radialGradient id="SVGWz1IcUOi" cx="0" cy="0" r="1" gradientTransform="rotate(106.553 .947 3.789)scale(4.56577 4.56847)" gradientUnits="userSpaceOnUse"><stop stop-color="#ff9532"/><stop offset=".251" stop-color="#ff835c"/><stop offset="1" stop-color="#f24a9d"/></radialGradient><linearGradient id="SVG06P03zyb" x1="13.576" x2="9.507" y1="13.031" y2="7.051" gradientUnits="userSpaceOnUse"><stop offset=".195" stop-color="#6d37cd"/><stop offset=".765" stop-color="#ea71ef"/></linearGradient><linearGradient id="SVGYwamCdkZ" x1="14.438" x2="7.948" y1="14.438" y2="5.367" gradientUnits="userSpaceOnUse"><stop offset=".195" stop-color="#7631ff"/><stop offset=".886" stop-color="#e63080"/></linearGradient><linearGradient id="SVGhdl4MbsQ" x1="1.063" x2="6" y1="11.688" y2="16.438" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="SVGkzCSBcxJ" x1="7.5" x2=".5" y1="12.056" y2="12.056" gradientUnits="userSpaceOnUse"><stop offset=".307" stop-color="#0d91e1"/><stop offset=".761" stop-color="#52b471"/></linearGradient></defs></g></svg>Как использовать иконку Design Ideas 20
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-color:design-ideas-20" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-color:design-ideas-20" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-color:design-ideas-20" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-color--design-ideas-20]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-color -->
<div class="i-fluent-color:design-ideas-20"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-color:design-ideas-20"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/fluent-color/design-ideas-20.svg" alt="Иконка Design Ideas 20" width="24" height="24">Похожие иконки в наборе Fluent UI System Color Icons
Вопросы и ответы: Иконка Design Ideas 20
Можно ли бесплатно использовать иконку Design Ideas 20 в коммерческих проектах?
Да. Fluent UI System Color Icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Как использовать иконку Design Ideas 20 в React?
Установите @iconify/react и выведите <Icon icon="fluent-color:design-ideas-20" /> или нажмите «Копировать код» на этой странице, чтобы получить отдельный React-компонент.
Как добавить иконку Design Ideas 20 на веб-страницу?
Подключите SVG-файл в теге изображения: <img src="https://iconyz.com/api/public/svg/fluent-color/design-ideas-20.svg" alt="Иконка Design Ideas 20">, или вставьте SVG-код прямо в страницу, чтобы стилизовать его через CSS.