Icône Wind Chime
fluent-emoji:wind-chime
L'icône Wind Chime (fluent-emoji:wind-chime) est une icône SVG gratuite de la collection Fluent Emoji par Microsoft Corporation. Elle est dessinée sur une grille de 32 × 32. Les Fluent Emoji icons sont publiées sous la licence MIT, qui autorise leur utilisation dans des projets personnels et commerciaux. Copiez-la en code SVG, JSX, Vue ou Svelte, ou téléchargez le fichier SVG.
- Collection
- Fluent Emoji
- Auteur
- Microsoft Corporation
- Licence
- MIT
- Taille
- 32 × 32
- Mots-clés
- windchime
Code SVG
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><g filter="url(#iFwoBHA)"><path fill="url(#iA2cUUb)" d="M13.2 21.05v.9c0 2 .42 3.97 1.23 5.79l.62 1.39c.09.21.3.34.53.34h5.47c.42 0 .7-.43.53-.81l-.41-.93c-.81-1.82-1.23-3.8-1.23-5.79v-.9a.58.58 0 0 0-.58-.58h-5.57c-.33.02-.59.28-.59.59"/><path fill="url(#iLNpXFe)" d="M13.2 21.05v.9c0 2 .42 3.97 1.23 5.79l.62 1.39c.09.21.3.34.53.34h5.47c.42 0 .7-.43.53-.81l-.41-.93c-.81-1.82-1.23-3.8-1.23-5.79v-.9a.58.58 0 0 0-.58-.58h-5.57c-.33.02-.59.28-.59.59"/><path fill="url(#iNBsuTb)" d="M13.2 21.05v.9c0 2 .42 3.97 1.23 5.79l.62 1.39c.09.21.3.34.53.34h5.47c.42 0 .7-.43.53-.81l-.41-.93c-.81-1.82-1.23-3.8-1.23-5.79v-.9a.58.58 0 0 0-.58-.58h-5.57c-.33.02-.59.28-.59.59"/></g><path fill="#4999DF" fill-rule="evenodd" d="M16.49 1.5a.5.5 0 0 1 .5.5v18.9a.5.5 0 0 1-1 0V2a.5.5 0 0 1 .5-.5" clip-rule="evenodd"/><path fill="url(#i6p4v0b)" fill-rule="evenodd" d="M16.49 1.5a.5.5 0 0 1 .5.5v18.9a.5.5 0 0 1-1 0V2a.5.5 0 0 1 .5-.5" clip-rule="evenodd"/><path fill="url(#isTTohd)" fill-rule="evenodd" d="M16.49 1.5a.5.5 0 0 1 .5.5v18.9a.5.5 0 0 1-1 0V2a.5.5 0 0 1 .5-.5" clip-rule="evenodd"/><path fill="url(#i88dm9q)" fill-rule="evenodd" d="M16.49 1.5a.5.5 0 0 1 .5.5v18.9a.5.5 0 0 1-1 0V2a.5.5 0 0 1 .5-.5" clip-rule="evenodd"/><g filter="url(#i3Tt1zd)" opacity=".8"><path fill="url(#i7nUxqc)" d="M19.55 3.54h-6.11c-3 0-5.44 2.44-5.44 5.44s2.44 5.44 5.44 5.44h6.11a5.44 5.44 0 1 0 0-10.88"/><path fill="url(#iwZA4Mb)" d="M19.55 3.54h-6.11c-3 0-5.44 2.44-5.44 5.44s2.44 5.44 5.44 5.44h6.11a5.44 5.44 0 1 0 0-10.88"/><path fill="url(#irQuueZ)" d="M19.55 3.54h-6.11c-3 0-5.44 2.44-5.44 5.44s2.44 5.44 5.44 5.44h6.11a5.44 5.44 0 1 0 0-10.88"/></g><g filter="url(#iQZiVyq)"><path fill="url(#i7Ge5NC)" d="M16.49 18.46a1.48 1.48 0 1 0 0-2.96a1.48 1.48 0 0 0 0 2.96"/><path fill="url(#iv1NMAb)" d="M16.49 18.46a1.48 1.48 0 1 0 0-2.96a1.48 1.48 0 0 0 0 2.96"/></g><path fill="#FF8585" d="M21.26 6.19c-.24 0-.43-.19-.43-.43v-.01a.28.28 0 1 0-.56 0v.01c0 .24-.19.43-.43.43c-.15 0-.28.12-.29.27c0 .16.12.28.28.28h.01c.24 0 .43.19.43.43v.01a.28.28 0 1 0 .56 0v-.01c0-.24.19-.43.43-.43h.01c.15 0 .28-.13.28-.28a.293.293 0 0 0-.29-.27m.01 4c-.24 0-.43-.19-.43-.43v-.01a.28.28 0 1 0-.56 0v.01c0 .24-.19.43-.43.43c-.15 0-.28.12-.29.27c0 .16.12.28.28.28h.01c.24 0 .43.19.43.43v.01a.28.28 0 1 0 .56 0v-.01c0-.24.19-.43.43-.43h.01c.15 0 .28-.13.28-.28a.294.294 0 0 0-.29-.27m2.42-1.99c-.24 0-.43-.19-.43-.43v-.01a.28.28 0 1 0-.56 0v.01c0 .24-.19.43-.43.43c-.15 0-.28.12-.29.27c0 .16.12.28.28.28h.01c.24 0 .43.19.43.43v.01a.28.28 0 1 0 .56 0v-.01c0-.24.19-.43.43-.43h.01c.15 0 .28-.13.28-.28a.294.294 0 0 0-.29-.27"/><path fill="#FF7578" d="M16.58 23.68a.67.67 0 1 0 0-1.34a.67.67 0 0 0 0 1.34m.57 2.3a.67.67 0 1 0 0-1.34a.67.67 0 0 0 0 1.34m.77 2.28a.67.67 0 1 0 0-1.34a.67.67 0 0 0 0 1.34"/><defs><radialGradient id="iA2cUUb" cx="0" cy="0" r="1" gradientTransform="matrix(-6.21875 0 0 -5.81876 19.812 23.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#F4EFFC"/><stop offset="1" stop-color="#E8E0F2"/></radialGradient><radialGradient id="iNBsuTb" cx="0" cy="0" r="1" gradientTransform="matrix(-8.21875 -.03127 .06954 -18.27657 20.969 23.406)" gradientUnits="userSpaceOnUse"><stop offset=".84" stop-color="#D4D0DC" stop-opacity="0"/><stop offset="1" stop-color="#D4D0DC"/></radialGradient><radialGradient id="isTTohd" cx="0" cy="0" r="1" gradientTransform="matrix(0 9 -.6775 0 16.99 1.781)" gradientUnits="userSpaceOnUse"><stop stop-color="#60C5FF"/><stop offset="1" stop-color="#60C5FF" stop-opacity="0"/></radialGradient><radialGradient id="i88dm9q" cx="0" cy="0" r="1" gradientTransform="matrix(-.72874 0 0 -3.65625 17.219 19.875)" gradientUnits="userSpaceOnUse"><stop stop-color="#70E6FF"/><stop offset="1" stop-color="#70E6FF" stop-opacity="0"/></radialGradient><radialGradient id="iwZA4Mb" cx="0" cy="0" r="1" gradientTransform="rotate(150.255 10.277 6.777)scale(3.52724 3.27187)" gradientUnits="userSpaceOnUse"><stop stop-color="#CEF8FF"/><stop offset="1" stop-color="#CEF8FF" stop-opacity="0"/></radialGradient><radialGradient id="irQuueZ" cx="0" cy="0" r="1" gradientTransform="matrix(6.375 -4.125 2.5689 3.97013 7.688 13.625)" gradientUnits="userSpaceOnUse"><stop stop-color="#CEF8FF"/><stop offset="1" stop-color="#CEF8FF" stop-opacity="0"/></radialGradient><radialGradient id="i7Ge5NC" cx="0" cy="0" r="1" gradientTransform="matrix(-2.125 1.4375 -1.57911 -2.33436 17.781 16.313)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF366"/><stop offset="1" stop-color="#EFBE44"/></radialGradient><radialGradient id="iv1NMAb" cx="0" cy="0" r="1" gradientTransform="matrix(.23999 1.17626 -1.12478 .22949 15.01 16.98)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFD561"/><stop offset="1" stop-color="#FFD561" stop-opacity="0"/></radialGradient><linearGradient id="iLNpXFe" x1="17.415" x2="17.415" y1="20.46" y2="20.906" gradientUnits="userSpaceOnUse"><stop stop-color="#D3D2E1"/><stop offset="1" stop-color="#D3D2E1" stop-opacity="0"/></linearGradient><linearGradient id="i6p4v0b" x1="17.813" x2="17.813" y1="22.5" y2="10" gradientUnits="userSpaceOnUse"><stop stop-color="#52D6FF"/><stop offset="1" stop-color="#52D6FF" stop-opacity="0"/></linearGradient><linearGradient id="i7nUxqc" x1="23.688" x2="8.313" y1="7.625" y2="7.625" gradientUnits="userSpaceOnUse"><stop stop-color="#94CBFF"/><stop offset="1" stop-color="#8CC5FD"/></linearGradient><filter id="iFwoBHA" width="8.68" height="9.26" x="13.2" y="20.21" 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=".4" dy="-.4"/><feGaussianBlur stdDeviation=".125"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.858824 0 0 0 0 0.807843 0 0 0 0 0.917647 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_1041"/></filter><filter id="i3Tt1zd" width="16.99" height="10.88" x="8" y="3.54" 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/><feGaussianBlur stdDeviation=".75"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.481771 0 0 0 0 0.630317 0 0 0 0 0.770833 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_1041"/></filter><filter id="iQZiVyq" width="2.96" height="2.96" x="15.01" y="15.5" 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/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.870588 0 0 0 0 0.721569 0 0 0 0 0.356863 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_1041"/></filter></defs></g></svg>Comment utiliser l'icône Wind Chime
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:wind-chime" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:wind-chime" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:wind-chime" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--wind-chime]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:wind-chime"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:wind-chime"></iconify-icon>Image HTML
<img src="https://iconyz.com/api/public/svg/fluent-emoji/wind-chime.svg" alt="Icône Wind Chime" width="24" height="24">Icônes similaires dans Fluent Emoji
L'icône Wind Chime dans d'autres collections
FAQ : Icône Wind Chime
L'icône Wind Chime est-elle gratuite pour un usage commercial ?
Oui. Les Fluent Emoji icons sont publiées sous la licence MIT, qui autorise leur utilisation dans des projets personnels et commerciaux.
Comment utiliser l'icône Wind Chime dans React ?
Installez @iconify/react et affichez <Icon icon="fluent-emoji:wind-chime" />, ou utilisez « Copier le code » sur cette page pour obtenir un composant React autonome.
Comment ajouter l'icône Wind Chime à une page web ?
Liez le fichier SVG dans une balise image : <img src="https://iconyz.com/api/public/svg/fluent-emoji/wind-chime.svg" alt="Icône Wind Chime">, ou collez le code SVG directement dans la page pour le styliser en CSS.