Ícone Heart Decoration

fluent-emoji:heart-decoration

O ícone Heart Decoration (fluent-emoji:heart-decoration) é um ícone SVG gratuito da coleção Fluent Emoji de Microsoft Corporation. Ele é desenhado em uma grade de 32 × 32. Fluent Emoji icons são publicados sob a licença MIT, que permite o uso em projetos pessoais e comerciais. Copie como código SVG, JSX, Vue ou Svelte, ou baixe o arquivo SVG.

Coleção: Fluent Emoji
Autor: Microsoft Corporation
Licença: MIT
Tamanho: 32 × 32
Tags: heartdecoration

Baixar SVG

Código SVG

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><rect width="28" height="28" x="2" y="2" fill="url(#iYg6mhc)" rx="4"/><path fill="url(#iA8SHze)" d="M2 26h28a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4"/><path fill="url(#ibgsgyc)" d="M6 2v28a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4"/><g filter="url(#ikeVkNd)" opacity=".2"><path fill="#fff" d="M5 4h23v1H5z"/></g><g filter="url(#id76tDe)" opacity=".2"><path fill="#fff" d="M27 4h1v22h-1z"/></g><g filter="url(#iz8TPxe)" opacity=".6"><circle cx="27" cy="5" r="1" fill="#fff"/></g><g filter="url(#i2dmvxb)"><path fill="#FFECFF" d="M19.32 8.886c-1.654.29-2.522 1.183-2.95 1.845c-.154.239-.644.264-.81.034c-.49-.674-1.41-1.607-2.884-1.868c-4.644-.825-6.561 3.277-5.792 6.317c1.089 4.264 6.105 8.108 8.196 9.553a1.6 1.6 0 0 0 1.836 0c2.09-1.445 7.108-5.29 8.197-9.563c.779-3.04-1.139-7.132-5.793-6.318"/><path fill="url(#iVmL7dc)" d="M19.32 8.886c-1.654.29-2.522 1.183-2.95 1.845c-.154.239-.644.264-.81.034c-.49-.674-1.41-1.607-2.884-1.868c-4.644-.825-6.561 3.277-5.792 6.317c1.089 4.264 6.105 8.108 8.196 9.553a1.6 1.6 0 0 0 1.836 0c2.09-1.445 7.108-5.29 8.197-9.563c.779-3.04-1.139-7.132-5.793-6.318"/></g><g filter="url(#iDf7SGe)"><path stroke="url(#iNKI2wb)" stroke-linecap="round" stroke-width=".5" d="M8.687 11.406c-.541.542-1.454 2.906 0 5.406c1.6 2.75 4.376 5.438 5.563 6.438"/></g><defs><linearGradient id="iYg6mhc" x1="28.5" x2="-3.063" y1="3.438" y2="35.75" gradientUnits="userSpaceOnUse"><stop stop-color="#B690FF"/><stop offset="1" stop-color="#5B46A2"/></linearGradient><linearGradient id="iA8SHze" x1="19" x2="19" y1="29" y2="26" gradientUnits="userSpaceOnUse"><stop stop-color="#6950BB"/><stop offset="1" stop-color="#6950BB" stop-opacity="0"/></linearGradient><linearGradient id="ibgsgyc" x1="3" x2="6" y1="19" y2="19" gradientUnits="userSpaceOnUse"><stop stop-color="#6950BB"/><stop offset="1" stop-color="#6950BB" stop-opacity="0"/></linearGradient><linearGradient id="iVmL7dc" x1="13.313" x2="17.563" y1="23" y2="21.125" gradientUnits="userSpaceOnUse"><stop stop-color="#F0E1FF"/><stop offset="1" stop-color="#F0E1FF" stop-opacity="0"/></linearGradient><linearGradient id="iNKI2wb" x1="12.125" x2="7.469" y1="20.75" y2="11.031" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><filter id="ikeVkNd" width="27" height="5" x="3" y="2" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7000_5041" stdDeviation="1"/></filter><filter id="id76tDe" width="5" height="26" x="25" y="2" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7000_5041" stdDeviation="1"/></filter><filter id="iz8TPxe" width="8" height="8" x="23" y="1" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7000_5041" stdDeviation="1.5"/></filter><filter id="i2dmvxb" width="21.063" height="18.275" x="4.219" y="8.781" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-2.5" dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.828719 0 0 0 0 0.697552 0 0 0 0 0.945833 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_7000_5041"/></filter><filter id="iDf7SGe" width="8.847" height="14.344" x="6.653" y="10.156" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7000_5041" stdDeviation=".5"/></filter></defs></g></svg>

Como usar o ícone Heart Decoration

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web component

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

<iconify-icon icon="fluent-emoji:heart-decoration"></iconify-icon>

Imagem HTML

<img src="https://iconyz.com/api/public/svg/fluent-emoji/heart-decoration.svg" alt="Ícone Heart Decoration" width="24" height="24">

Ícones relacionados em Fluent Emoji

O ícone Heart Decoration em outras coleções

Perguntas frequentes sobre Ícone Heart Decoration

O ícone Heart Decoration é grátis para uso comercial?

Sim. Fluent Emoji icons são publicados sob a licença MIT, que permite o uso em projetos pessoais e comerciais.

Como uso o ícone Heart Decoration no React?

Instale @iconify/react e renderize <Icon icon="fluent-emoji:heart-decoration" />, ou use “Copiar código” nesta página para obter um componente React independente.

Como adiciono o ícone Heart Decoration a uma página web?

Vincule o arquivo SVG em uma tag de imagem: <img src="https://iconyz.com/api/public/svg/fluent-emoji/heart-decoration.svg" alt="Ícone Heart Decoration">, ou cole o código SVG diretamente na página para estilizá-lo com CSS.

Ver todos os Ícones Fluent Emoji →