Иконка Design Ideas 16
fluent-color:design-ideas-16
Иконка Design Ideas 16 (fluent-color:design-ideas-16) — бесплатная SVG-иконка из набора Fluent UI System Color Icons от Microsoft Corporation. Она нарисована на сетке 16 × 16. Fluent UI System Color Icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах. Скопируйте её как код SVG, JSX, Vue или Svelte или скачайте SVG-файл.
- Набор
- Fluent UI System Color Icons
- Автор
- Microsoft Corporation
- Лицензия
- MIT
- Размер
- 16 × 16
- Теги
- designideas, idea
Код SVG
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill="none"><circle cx="7.5" cy="6.5" r="4.5" fill="url(#SVG8PA1IbRs)"/><circle cx="7.5" cy="6.5" r="4.5" fill="url(#SVG0fciQbzl)" fill-opacity=".6"/><circle cx="7.5" cy="6.5" r="4.5" fill="url(#SVGpuPKkbmL)" fill-opacity=".6"/><rect width="8" height="8" x="7" y="6" fill="url(#SVGDAeOeufm)" rx="2"/><path fill="url(#SVGSBqlTcGV)" fill-rule="evenodd" d="M7.5 11a4.5 4.5 0 0 0 4.473-5H9a2 2 0 0 0-2 2v2.973q.246.027.5.027" clip-rule="evenodd"/><path fill="url(#SVGew1Wld9z)" fill-rule="evenodd" d="M7.5 11a4.5 4.5 0 0 0 4.473-5H9a2 2 0 0 0-2 2v2.973q.246.027.5.027" clip-rule="evenodd"/><path fill="url(#SVGOm5uNIAU)" d="M5 9.718c0 3.45-1.062 5.25-2 5.25c-.812 0-2-1.494-2-5.25C1 6.51 1.895 6 3 6c.984 0 2 .268 2 3.718"/><path fill="url(#SVGcE4NbeiQ)" fill-opacity=".5" d="M5 9.718c0 3.45-1.062 5.25-2 5.25c-.812 0-2-1.494-2-5.25C1 6.51 1.895 6 3 6c.984 0 2 .268 2 3.718"/><path fill="url(#SVGiXxZgdkR)" d="M5 9.718c0 3.45-1.062 5.25-2 5.25c-.812 0-2-1.494-2-5.25C1 6.51 1.895 6 3 6c.984 0 2 .268 2 3.718"/><path fill="url(#SVGMo8Bcbep)" fill-opacity=".7" d="M5 9.718c0 3.45-1.062 5.25-2 5.25c-.812 0-2-1.494-2-5.25C1 6.51 1.895 6 3 6c.984 0 2 .268 2 3.718"/><path fill="#fff" fill-opacity=".15" d="M1.046 8.577C1.242 6.384 2.042 6 3 6c.863 0 1.75.206 1.955 2.577a3.95 3.95 0 0 1-1.954.502a3.95 3.95 0 0 1-1.955-.502"/><path fill="url(#SVGYZWTocVT)" d="M3.58 1.125a.5.5 0 0 1 .124.585a.3.3 0 0 0-.017.103c0 .063.016.183.167.333c.132.133.209.195.36.342c.13.124.267.27.39.453c.255.383.396.862.396 1.559C5 5.97 4.023 7 3 7S1 5.97 1 4.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="SVG8PA1IbRs" cx="0" cy="0" r="1" gradientTransform="rotate(-78.382 10.014 4.248)scale(12.1752 12.1751)" gradientUnits="userSpaceOnUse"><stop offset=".222" stop-color="#4e46e2"/><stop offset=".578" stop-color="#625df6"/><stop offset=".955" stop-color="#e37dff"/></radialGradient><radialGradient id="SVG0fciQbzl" cx="0" cy="0" r="1" gradientTransform="rotate(-17.281 30.071 -1.549)scale(4.91501 6.43369)" gradientUnits="userSpaceOnUse"><stop offset=".566" stop-color="#251fba"/><stop offset="1" stop-color="#5e51e4" stop-opacity="0"/></radialGradient><radialGradient id="SVGpuPKkbmL" cx="0" cy="0" r="1" gradientTransform="rotate(8.26 -37.523 13.02)scale(4.52116 4.62151)" gradientUnits="userSpaceOnUse"><stop offset=".566" stop-color="#251fba"/><stop offset="1" stop-color="#5e51e4" stop-opacity="0"/></radialGradient><radialGradient id="SVGDAeOeufm" cx="0" cy="0" r="1" gradientTransform="rotate(42.462 -4.446 13.61)scale(9.45903 12.8479)" 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="SVGcE4NbeiQ" cx="0" cy="0" r="1" gradientTransform="rotate(80.269 -1.81 4.4)scale(8.93568 24.4811)" gradientUnits="userSpaceOnUse"><stop offset=".5" stop-color="#dd3ce2" stop-opacity="0"/><stop offset="1" stop-color="#dd3ce2"/></radialGradient><radialGradient id="SVGMo8Bcbep" cx="0" cy="0" r="1" gradientTransform="matrix(1.3457 -4.41924 7.80503 2.3767 1.837 6)" gradientUnits="userSpaceOnUse"><stop offset=".169" stop-color="#02888d"/><stop offset=".26" stop-color="#02888d" stop-opacity="0"/></radialGradient><radialGradient id="SVGYZWTocVT" cx="0" cy="0" r="1" gradientTransform="rotate(106.553 .82 2.916)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="SVGSBqlTcGV" x1="11.592" x2="7.523" y1="11.031" y2="5.051" gradientUnits="userSpaceOnUse"><stop offset=".195" stop-color="#6d37cd"/><stop offset=".765" stop-color="#ea71ef"/></linearGradient><linearGradient id="SVGew1Wld9z" x1="12.453" x2="5.964" y1="12.438" y2="3.367" gradientUnits="userSpaceOnUse"><stop offset=".195" stop-color="#7631ff"/><stop offset=".886" stop-color="#e63080"/></linearGradient><linearGradient id="SVGOm5uNIAU" x1=".063" x2="4.05" y1="9.807" y2="14.499" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="SVGiXxZgdkR" x1="6.5" x2="-.5" y1="10.108" y2="10.108" gradientUnits="userSpaceOnUse"><stop offset=".307" stop-color="#0d91e1"/><stop offset=".761" stop-color="#52b471"/></linearGradient></defs></g></svg>Как использовать иконку Design Ideas 16
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-color:design-ideas-16" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-color:design-ideas-16" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-color:design-ideas-16" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-color--design-ideas-16]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-color -->
<div class="i-fluent-color:design-ideas-16"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-color:design-ideas-16"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/fluent-color/design-ideas-16.svg" alt="Иконка Design Ideas 16" width="24" height="24">Похожие иконки в наборе Fluent UI System Color Icons
Вопросы и ответы: Иконка Design Ideas 16
Можно ли бесплатно использовать иконку Design Ideas 16 в коммерческих проектах?
Да. Fluent UI System Color Icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Как использовать иконку Design Ideas 16 в React?
Установите @iconify/react и выведите <Icon icon="fluent-color:design-ideas-16" /> или нажмите «Копировать код» на этой странице, чтобы получить отдельный React-компонент.
Как добавить иконку Design Ideas 16 на веб-страницу?
Подключите SVG-файл в теге изображения: <img src="https://iconyz.com/api/public/svg/fluent-color/design-ideas-16.svg" alt="Иконка Design Ideas 16">, или вставьте SVG-код прямо в страницу, чтобы стилизовать его через CSS.