Иконка Pencil

fluent-emoji:pencil

Иконка Pencil (fluent-emoji:pencil) — бесплатная SVG-иконка из набора Fluent Emoji от Microsoft Corporation. Она нарисована на сетке 32 × 32. Fluent Emoji icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах. Скопируйте её как код SVG, JSX, Vue или Svelte или скачайте SVG-файл.

Набор: Fluent Emoji
Автор: Microsoft Corporation
Лицензия: MIT
Размер: 32 × 32

Скачать SVG

Код SVG

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="url(#iqpswMS)" d="M23.037 2.506a1.5 1.5 0 0 1 2.121 0l4.363 4.363a1.5 1.5 0 0 1 0 2.121L9.464 29.048l-6.485-6.485z"/><path fill="url(#iRAj20H)" d="M23.037 2.506a1.5 1.5 0 0 1 2.121 0l4.363 4.363a1.5 1.5 0 0 1 0 2.121L9.464 29.048l-6.485-6.485z"/><path fill="url(#iCQ4oXd)" d="M23.037 2.506a1.5 1.5 0 0 1 2.121 0l4.363 4.363a1.5 1.5 0 0 1 0 2.121L9.464 29.048l-6.485-6.485z"/><path fill="url(#iaOgR4g)" d="M23.037 2.506a1.5 1.5 0 0 1 2.121 0l4.363 4.363a1.5 1.5 0 0 1 0 2.121L9.464 29.048l-6.485-6.485z"/><path fill="url(#ixIPiUd)" d="M2.034 29.782a.2.2 0 0 0 .219.218l6.54-.629a1 1 0 0 0 .518-.205l.153-.118l-6.484-6.485l-.101.122a1 1 0 0 0-.224.543z"/><path fill="url(#iLomexe)" d="M2.034 29.782a.2.2 0 0 0 .219.218l6.54-.629a1 1 0 0 0 .518-.205l.153-.118l-6.484-6.485l-.101.122a1 1 0 0 0-.224.543z"/><path fill="url(#iLKFBOe)" d="M2.034 29.782a.2.2 0 0 0 .219.218l6.54-.629a1 1 0 0 0 .518-.205l.153-.118l-6.484-6.485l-.101.122a1 1 0 0 0-.224.543z"/><path fill="url(#i3Gq0mb)" d="m26.34 12.172l3.18-3.182a1.5 1.5 0 0 0 0-2.121l-4.363-4.363a1.5 1.5 0 0 0-2.121 0l-3.182 3.182z"/><path fill="url(#iByxKAd)" d="m26.34 12.172l3.18-3.182a1.5 1.5 0 0 0 0-2.121l-4.363-4.363a1.5 1.5 0 0 0-2.121 0l-3.182 3.182z"/><path fill="url(#iR8IWHb)" d="m26.34 12.172l3.18-3.182a1.5 1.5 0 0 0 0-2.121l-4.363-4.363a1.5 1.5 0 0 0-2.121 0l-3.182 3.182z"/><path fill="url(#i5F8UHt)" d="m16.666 8.877l3.19-3.19l6.484 6.485l-3.19 3.19z"/><path fill="url(#ixftiIe)" d="m16.666 8.877l3.19-3.19l6.484 6.485l-3.19 3.19z"/><path fill="url(#iEB001d)" d="M2.253 30a.2.2 0 0 1-.219-.218l.218-2.3l2.296 2.297z"/><defs><linearGradient id="iRAj20H" x1="10.136" x2="11.699" y1="14.875" y2="16.375" gradientUnits="userSpaceOnUse"><stop stop-color="#EE9B6A"/><stop offset="1" stop-color="#EE9B6A" stop-opacity="0"/></linearGradient><linearGradient id="iCQ4oXd" x1="20.637" x2="18.762" y1="18.5" y2="16.938" gradientUnits="userSpaceOnUse"><stop stop-color="#E66A62"/><stop offset="1" stop-color="#E66A62" stop-opacity="0"/></linearGradient><linearGradient id="ixIPiUd" x1="3.887" x2="6.512" y1="26.094" y2="30.219" gradientUnits="userSpaceOnUse"><stop stop-color="#D8A587"/><stop offset="1" stop-color="#CE7A98"/></linearGradient><linearGradient id="iLomexe" x1="6.98" x2="6.457" y1="26.282" y2="26.812" gradientUnits="userSpaceOnUse"><stop offset=".207" stop-color="#FFC09F"/><stop offset="1" stop-color="#FCB196" stop-opacity="0"/></linearGradient><linearGradient id="iLKFBOe" x1="1.512" x2="3.637" y1="25.937" y2="26.125" gradientUnits="userSpaceOnUse"><stop stop-color="#DEBCA3"/><stop offset="1" stop-color="#DEBCA3" stop-opacity="0"/></linearGradient><linearGradient id="i3Gq0mb" x1="28.074" x2="23.949" y1="4.938" y2="9" gradientUnits="userSpaceOnUse"><stop stop-color="#FF6153"/><stop offset="1" stop-color="#FF6154"/></linearGradient><linearGradient id="iByxKAd" x1="20.762" x2="24.012" y1="4.563" y2="7.563" gradientUnits="userSpaceOnUse"><stop stop-color="#F1553E"/><stop offset="1" stop-color="#F1553E" stop-opacity="0"/></linearGradient><linearGradient id="i5F8UHt" x1="18.324" x2="22.449" y1="7.375" y2="11.125" gradientUnits="userSpaceOnUse"><stop stop-color="#C5C4CB"/><stop offset="1" stop-color="#E8DEFA"/></linearGradient><linearGradient id="ixftiIe" x1="24.824" x2="22.512" y1="14.375" y2="12.125" gradientUnits="userSpaceOnUse"><stop stop-color="#C9B9E0"/><stop offset="1" stop-color="#C9B9E0" stop-opacity="0"/></linearGradient><linearGradient id="iEB001d" x1="2.23" x2="3.291" y1="28.531" y2="30.001" gradientUnits="userSpaceOnUse"><stop stop-color="#461E49"/><stop offset="1" stop-color="#450F51"/></linearGradient><radialGradient id="iqpswMS" cx="0" cy="0" r="1" gradientTransform="matrix(13.74998 -14.06245 8.72293 8.5291 6.199 26)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF9130"/><stop offset="1" stop-color="#F3633D"/></radialGradient><radialGradient id="iaOgR4g" cx="0" cy="0" r="1" gradientTransform="matrix(12.87503 -12.81253 2.8651 2.87908 5.949 25.813)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF994D"/><stop offset="1" stop-color="#FF994D" stop-opacity="0"/></radialGradient><radialGradient id="iR8IWHb" cx="0" cy="0" r="1" gradientTransform="rotate(135 12.398 8.577)scale(1.37002 3.11227)" gradientUnits="userSpaceOnUse"><stop offset=".177" stop-color="#FF786D"/><stop offset="1" stop-color="#FF786D" stop-opacity="0"/></radialGradient></defs></g></svg>

Как использовать иконку Pencil

React

import { Icon } from "@iconify/react";

<Icon icon="fluent-emoji:pencil" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="fluent-emoji:pencil" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="fluent-emoji:pencil" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--pencil]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:pencil"></div>

Веб-компонент

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="fluent-emoji:pencil"></iconify-icon>

Изображение HTML

<img src="https://iconyz.com/api/public/svg/fluent-emoji/pencil.svg" alt="Иконка Pencil" width="24" height="24">

Иконка Pencil в других наборах

Вопросы и ответы: Иконка Pencil

Можно ли бесплатно использовать иконку Pencil в коммерческих проектах?

Да. Fluent Emoji icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.

Как использовать иконку Pencil в React?

Установите @iconify/react и выведите <Icon icon="fluent-emoji:pencil" /> или нажмите «Копировать код» на этой странице, чтобы получить отдельный React-компонент.

Как добавить иконку Pencil на веб-страницу?

Подключите SVG-файл в теге изображения: <img src="https://iconyz.com/api/public/svg/fluent-emoji/pencil.svg" alt="Иконка Pencil">, или вставьте SVG-код прямо в страницу, чтобы стилизовать его через CSS.

Все Иконки Fluent Emoji →