ICONYZ
Português (Brasil)
Ícone Premium 24 de Fluent UI System Color Icons

Ícone Premium 24

fluent-color:premium-24

O ícone Premium 24 (fluent-color:premium-24) é um ícone SVG gratuito da coleção Fluent UI System Color Icons de Microsoft Corporation. Ele é desenhado em uma grade de 24 × 24. Fluent UI System Color 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 UI System Color Icons
Autor
Microsoft Corporation
Licença
MIT
Tamanho
24 × 24
Baixar SVG

Código SVG

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path fill="#d9d9d9" d="M17.999 3a.75.75 0 0 1 .605.306l.055.087l3.263 6.028l.038.093l.012.04l.02.102l.006.094a.8.8 0 0 1-.027.2l-.024.062H15.5L13.5 3z"/><path fill="url(#SVGORrjZb5b)" d="M17.999 3a.75.75 0 0 1 .605.306l.055.087l3.263 6.028l.038.093l.012.04l.02.102l.006.094a.8.8 0 0 1-.027.2l-.024.062H15.5L13.5 3z"/><path fill="#d9d9d9" d="M2.006 9.843L2 9.75l.003-.066l.013-.089l.024-.086l.022-.059l.028-.057l3.25-6a.75.75 0 0 1 .557-.386L5.999 3l4.501.007L8.25 10l-6.21-.009a1 1 0 0 1-.034-.148"/><path fill="url(#SVG3ukbHcrT)" d="M2.006 9.843L2 9.75l.003-.066l.013-.089l.024-.086l.022-.059l.028-.057l3.25-6a.75.75 0 0 1 .557-.386L5.999 3l4.501.007L8.25 10l-6.21-.009a1 1 0 0 1-.034-.148"/><path fill="url(#SVGWaJAUcXm)" d="m21.96 9.514l-.038-.093L21.694 9h-5.928l-.769 1.5L12 18.187V21l.125-.01l.077-.017l.098-.033a.7.7 0 0 0 .297-.232l9.234-10.487l.04-.053l.016-.024l.038-.069l.047-.126a.8.8 0 0 0 .027-.199l-.006-.094l-.02-.102z"/><path fill="#a9a9a9" d="m12 21l-.101-.006l-.118-.026a.7.7 0 0 1-.174-.076l-.009-.007a.7.7 0 0 1-.13-.104l-9.29-10.546l-.026-.032l-.04-.059a.75.75 0 0 1-.106-.301L2 9.75l.003-.066l.013-.089l.024-.086l.022-.059l.028-.057L2.303 9h6.04l.655 1.5l3 7.687z"/><path fill="url(#SVG2N1rxdpx)" d="m12 21l-.101-.006l-.118-.026a.7.7 0 0 1-.174-.076l-.009-.007a.7.7 0 0 1-.13-.104l-9.29-10.546l-.026-.032l-.04-.059a.75.75 0 0 1-.106-.301L2 9.75l.003-.066l.013-.089l.024-.086l.022-.059l.028-.057L2.303 9h6.04l.655 1.5l3 7.687z"/><path fill="#7c7a7a" d="M9.286 3.521A.75.75 0 0 1 10 3h4a.75.75 0 0 1 .714.521L16.628 9.5H7.373z"/><path fill="url(#SVGu9uqybbw)" d="M9.286 3.521A.75.75 0 0 1 10 3h4a.75.75 0 0 1 .714.521L16.628 9.5H7.373z"/><path fill="#3f3f3f" d="m7.533 9l-.247.771a.75.75 0 0 0 .015.502l4 10.25a.75.75 0 0 0 1.398 0l4-10.25a.75.75 0 0 0 .015-.502L16.468 9z"/><path fill="url(#SVGzi8LleUH)" d="m7.533 9l-.247.771a.75.75 0 0 0 .015.502l4 10.25a.75.75 0 0 0 1.398 0l4-10.25a.75.75 0 0 0 .015-.502L16.468 9z"/><path fill="url(#SVG53MYIePU)" fill-opacity=".7" d="M17.999 3a.75.75 0 0 1 .605.306l.055.087l3.263 6.028l.038.093l.012.04l.02.102l.006.094a.8.8 0 0 1-.027.2l-.047.125l-.038.069a1 1 0 0 1-.075.102l.06-.078l-.025.035l-9.25 10.505a.7.7 0 0 1-.297.232l-.098.033l-.078.017L12 21l-.1-.006l-.118-.026a.7.7 0 0 1-.174-.076l-.009-.007a.7.7 0 0 1-.13-.104l-9.29-10.546l-.026-.032l-.04-.059a.75.75 0 0 1-.106-.301L2 9.75l.003-.066l.013-.089l.024-.086l.022-.059l.028-.057l3.25-6a.75.75 0 0 1 .557-.386L5.999 3z"/><defs><linearGradient id="SVGORrjZb5b" x1="16.535" x2="21.091" y1="3" y2="13.647" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#102784"/></linearGradient><linearGradient id="SVG3ukbHcrT" x1="9.286" x2="5.308" y1=".083" y2="8.955" gradientUnits="userSpaceOnUse"><stop stop-color="#9ff0f9"/><stop offset="1" stop-color="#29c3ff"/></linearGradient><linearGradient id="SVGWaJAUcXm" x1="24.351" x2="13.462" y1="3" y2="19.603" gradientUnits="userSpaceOnUse"><stop stop-color="#1b44b1"/><stop offset="1" stop-color="#2052cb"/></linearGradient><linearGradient id="SVG2N1rxdpx" x1="3.765" x2="11.05" y1="6.6" y2="20.884" gradientUnits="userSpaceOnUse"><stop stop-color="#0094f0"/><stop offset="1" stop-color="#6ce0ff"/></linearGradient><linearGradient id="SVGu9uqybbw" x1="12" x2="12" y1="3" y2="11.125" gradientUnits="userSpaceOnUse"><stop stop-color="#3bd5ff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGzi8LleUH" x1="11.994" x2="11.994" y1="4.8" y2="21" gradientUnits="userSpaceOnUse"><stop stop-color="#2052cb"/><stop offset="1" stop-color="#0fafff"/></linearGradient><linearGradient id="SVG53MYIePU" x1="-.031" x2="15.123" y1="-13.95" y2="22.799" gradientUnits="userSpaceOnUse"><stop offset=".533" stop-color="#ff6ce8" stop-opacity="0"/><stop offset="1" stop-color="#ff6ce8"/></linearGradient></defs></g></svg>

Como usar o ícone Premium 24

React

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

<Icon icon="fluent-color:premium-24" width="24" />

Vue

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

<template>
  <Icon icon="fluent-color:premium-24" width="24" />
</template>

Svelte

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

<Icon icon="fluent-color:premium-24" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-color--premium-24]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fluent-color -->
<div class="i-fluent-color:premium-24"></div>

Web component

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

<iconify-icon icon="fluent-color:premium-24"></iconify-icon>

Imagem HTML

<img src="https://iconyz.com/api/public/svg/fluent-color/premium-24.svg" alt="Ícone Premium 24" width="24" height="24">

Ícones relacionados em Fluent UI System Color Icons

Perguntas frequentes sobre Ícone Premium 24

O ícone Premium 24 é grátis para uso comercial?

Sim. Fluent UI System Color Icons são publicados sob a licença MIT, que permite o uso em projetos pessoais e comerciais.

Como uso o ícone Premium 24 no React?

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

Como adiciono o ícone Premium 24 a uma página web?

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

Ver todos os Fluent UI System Color Icons →