Duck アイコン
fluent-emoji:duck
Duck アイコン(fluent-emoji:duck)は、Fluent Emoji セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent Emoji
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 32 × 32
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="#568831" d="M14.668 8.32A4.52 4.52 0 1 0 7 9.356V10c.269 0 .449.27.339.52l-3.81 8.63l5.38 2.2l5.76-13.03z"/><path fill="url(#iH1RUne)" d="M14.668 8.32A4.52 4.52 0 1 0 7 9.356V10c.269 0 .449.27.339.52l-3.81 8.63l5.38 2.2l5.76-13.03z"/><path fill="url(#iMxFzdc)" d="M14.668 8.32A4.52 4.52 0 1 0 7 9.356V10c.269 0 .449.27.339.52l-3.81 8.63l5.38 2.2l5.76-13.03z"/><path fill="url(#ineuc8d)" d="M14.668 8.32A4.52 4.52 0 1 0 7 9.356V10c.269 0 .449.27.339.52l-3.81 8.63l5.38 2.2l5.76-13.03z"/><path fill="url(#iNj4FBk)" d="M14.668 8.32A4.52 4.52 0 1 0 7 9.356V10c.269 0 .449.27.339.52l-3.81 8.63l5.38 2.2l5.76-13.03z"/><path fill="url(#it4BOSc)" d="m11.719 15l.883-2H6.24l-.88 2z"/><path fill="url(#impM26b)" d="m11.719 15l.883-2H6.24l-.88 2z"/><g filter="url(#iUwW5wc)"><path fill="url(#iqIMGtc)" d="M7 3.68L4.79 6.15c-.5.54-1.21.85-1.95.85h-.33c-.28 0-.51.23-.51.51C2 8.88 3.12 10 4.49 10H7z"/><path fill="url(#iLo5gKw)" d="M7 3.68L4.79 6.15c-.5.54-1.21.85-1.95.85h-.33c-.28 0-.51.23-.51.51C2 8.88 3.12 10 4.49 10H7z"/><path fill="url(#it6Rxlc)" d="M7 3.68L4.79 6.15c-.5.54-1.21.85-1.95.85h-.33c-.28 0-.51.23-.51.51C2 8.88 3.12 10 4.49 10H7z"/><path fill="url(#is0TVzc)" d="M7 3.68L4.79 6.15c-.5.54-1.21.85-1.95.85h-.33c-.28 0-.51.23-.51.51C2 8.88 3.12 10 4.49 10H7z"/></g><path fill="url(#ioKXd0d)" d="M10.438 7.016a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"/><path fill="url(#iuxBUpb)" d="M10.438 7.016a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"/><path fill="url(#i2Vef9r)" d="M10.438 7.016a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"/><path fill="url(#ixevkeb)" d="M27.43 13.57c-.92.92-2.16 1.43-3.45 1.43H5.36C4.25 17.51 3 19.54 3 22c0 4.42 3.58 8 8 8h8c6.08 0 11-4.92 11-11v-4.36c0-1.34-1.62-2.01-2.57-1.07"/><path fill="url(#i56pdVc)" d="M27.43 13.57c-.92.92-2.16 1.43-3.45 1.43H5.36C4.25 17.51 3 19.54 3 22c0 4.42 3.58 8 8 8h8c6.08 0 11-4.92 11-11v-4.36c0-1.34-1.62-2.01-2.57-1.07"/><path fill="url(#ifQQlTb)" d="M27.43 13.57c-.92.92-2.16 1.43-3.45 1.43H5.36C4.25 17.51 3 19.54 3 22c0 4.42 3.58 8 8 8h8c6.08 0 11-4.92 11-11v-4.36c0-1.34-1.62-2.01-2.57-1.07"/><path fill="url(#iEohJuK)" d="M27.43 13.57c-.01.01 0 .01 0 0c-.168.168-.344.309-.43.383V19c0 6.08-4.92 11-11 11h3c6.08 0 11-4.92 11-11v-4.36c0-1.34-1.62-2.01-2.57-1.07"/><path fill="url(#i8cA4fe)" d="M27.43 13.57c-.01.01 0 .01 0 0c-.168.168-.344.309-.43.383V19c0 6.08-4.92 11-11 11h3c6.08 0 11-4.92 11-11v-4.36c0-1.34-1.62-2.01-2.57-1.07"/><path fill="url(#i3yMIRd)" d="M27.43 13.57c-.01.01 0 .01 0 0c-.168.168-.344.309-.43.383V19c0 6.08-4.92 11-11 11h3c6.08 0 11-4.92 11-11v-4.36c0-1.34-1.62-2.01-2.57-1.07"/><g filter="url(#iGxIEtb)"><path fill="url(#iocMEQb)" d="M5.36 15C4.25 17.51 3 19.54 3 22c0 3.73 2.55 6.86 6 7.75V22.4c0-1.41.34-2.81.99-4.06L11.71 15z"/><path fill="url(#iSrS1Ce)" d="M5.36 15C4.25 17.51 3 19.54 3 22c0 3.73 2.55 6.86 6 7.75V22.4c0-1.41.34-2.81.99-4.06L11.71 15z"/><path fill="url(#i1O0cec)" d="M5.36 15C4.25 17.51 3 19.54 3 22c0 3.73 2.55 6.86 6 7.75V22.4c0-1.41.34-2.81.99-4.06L11.71 15z"/></g><g filter="url(#iGCWz0c)"><path fill="url(#iFNr3Fb)" d="M26.997 13.955A4.87 4.87 0 0 1 23.98 15H11.71l-1.72 3.34q-.31.597-.525 1.232a4.13 4.13 0 0 0 .004 2.666C10.434 25.03 12.781 27 15.526 27h4.847c2.043 0 4.124-.718 5.149-2.485A10.96 10.96 0 0 0 27 19v-4.525z"/><path fill="url(#ieNuGAb)" d="M26.997 13.955A4.87 4.87 0 0 1 23.98 15H11.71l-1.72 3.34q-.31.597-.525 1.232a4.13 4.13 0 0 0 .004 2.666C10.434 25.03 12.781 27 15.526 27h4.847c2.043 0 4.124-.718 5.149-2.485A10.96 10.96 0 0 0 27 19v-4.525z"/><path fill="url(#inlaT7c)" d="M26.997 13.955A4.87 4.87 0 0 1 23.98 15H11.71l-1.72 3.34q-.31.597-.525 1.232a4.13 4.13 0 0 0 .004 2.666C10.434 25.03 12.781 27 15.526 27h4.847c2.043 0 4.124-.718 5.149-2.485A10.96 10.96 0 0 0 27 19v-4.525z"/><path fill="url(#iMKYMje)" d="M26.997 13.955A4.87 4.87 0 0 1 23.98 15H11.71l-1.72 3.34q-.31.597-.525 1.232a4.13 4.13 0 0 0 .004 2.666C10.434 25.03 12.781 27 15.526 27h4.847c2.043 0 4.124-.718 5.149-2.485A10.96 10.96 0 0 0 27 19v-4.525z"/><path fill="url(#iMDGZQb)" d="M26.997 13.955A4.87 4.87 0 0 1 23.98 15H11.71l-1.72 3.34q-.31.597-.525 1.232a4.13 4.13 0 0 0 .004 2.666C10.434 25.03 12.781 27 15.526 27h4.847c2.043 0 4.124-.718 5.149-2.485A10.96 10.96 0 0 0 27 19v-4.525z"/></g><path fill="url(#iSOReld)" d="M26.997 13.955A4.87 4.87 0 0 1 23.98 15H11.71l-1.72 3.34q-.31.597-.525 1.232a4.13 4.13 0 0 0 .004 2.666C10.434 25.03 12.781 27 15.526 27h4.847c2.043 0 4.124-.718 5.149-2.485A10.96 10.96 0 0 0 27 19v-4.525z"/><g filter="url(#imVGqyd)"><path fill="url(#iYJ4Bfc)" d="m10.438 12.094l2.343-5.625h1.594l-2.317 5.625z"/></g><defs><radialGradient id="iH1RUne" cx="0" cy="0" r="1" gradientTransform="rotate(126.978 6.3 5.523)scale(6.65001 7.19865)" gradientUnits="userSpaceOnUse"><stop stop-color="#71A650"/><stop offset="1" stop-color="#71A650" stop-opacity="0"/></radialGradient><radialGradient id="iMxFzdc" cx="0" cy="0" r="1" gradientTransform="rotate(-86.912 10.304 -1.065)scale(7.5422 6.93921)" gradientUnits="userSpaceOnUse"><stop offset=".868" stop-color="#71A650" stop-opacity="0"/><stop offset="1" stop-color="#71A650"/></radialGradient><radialGradient id="ineuc8d" cx="0" cy="0" r="1" gradientTransform="matrix(-1.50002 2.6875 -1.37533 -.76764 6.438 11.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#4C6634"/><stop offset="1" stop-color="#4C6634" stop-opacity="0"/></radialGradient><radialGradient id="iNj4FBk" cx="0" cy="0" r="1" gradientTransform="matrix(-6.0625 -.12498 .12792 -6.20515 18.625 9.313)" gradientUnits="userSpaceOnUse"><stop stop-color="#4C6634"/><stop offset="1" stop-color="#4C6634" stop-opacity="0"/></radialGradient><radialGradient id="iqIMGtc" cx="0" cy="0" r="1" gradientTransform="matrix(5.8125 0 0 5.4375 3.781 7.625)" gradientUnits="userSpaceOnUse"><stop stop-color="#FAC252"/><stop offset="1" stop-color="#D2A776"/></radialGradient><radialGradient id="is0TVzc" cx="0" cy="0" r="1" gradientTransform="matrix(6.1875 1.78125 -.7711 2.67853 2.5 6.437)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDA66"/><stop offset="1" stop-color="#FFDA66" stop-opacity="0"/></radialGradient><radialGradient id="ioKXd0d" cx="0" cy="0" r="1" gradientTransform="matrix(-.40625 .5625 -.50149 -.3622 10.586 6.355)" gradientUnits="userSpaceOnUse"><stop offset=".006" stop-color="#433437"/><stop offset="1" stop-color="#3B2838"/></radialGradient><radialGradient id="iuxBUpb" cx="0" cy="0" r="1" gradientTransform="rotate(137.643 4.074 5.253)scale(.35946 .31624)" gradientUnits="userSpaceOnUse"><stop stop-color="#5C5051"/><stop offset="1" stop-color="#5C5051" stop-opacity="0"/></radialGradient><radialGradient id="i56pdVc" cx="0" cy="0" r="1" gradientTransform="matrix(0 5.9375 -6.375 0 16.5 23.063)" gradientUnits="userSpaceOnUse"><stop offset=".453" stop-color="#A58CBE"/><stop offset="1" stop-color="#A58CBE" stop-opacity="0"/></radialGradient><radialGradient id="i8cA4fe" cx="0" cy="0" r="1" gradientTransform="matrix(-2.875 0 0 -6.9375 31.438 19.125)" gradientUnits="userSpaceOnUse"><stop stop-color="#E7E4EA"/><stop offset="0" stop-color="#D8D4DD"/><stop offset="1" stop-color="#D8D4DD" stop-opacity="0"/></radialGradient><radialGradient id="i3yMIRd" cx="0" cy="0" r="1" gradientTransform="matrix(2.3125 .625 -1.34658 4.98235 26.125 15.375)" gradientUnits="userSpaceOnUse"><stop stop-color="#E7E4EA"/><stop offset="0" stop-color="#D8D4DD"/><stop offset=".884" stop-color="#D8D4DD" stop-opacity="0"/></radialGradient><radialGradient id="iSrS1Ce" cx="0" cy="0" r="1" gradientTransform="rotate(-153.812 7.697 7.104)scale(2.12431 3.53998)" gradientUnits="userSpaceOnUse"><stop stop-color="#87645F"/><stop offset="1" stop-color="#87645F" stop-opacity="0"/></radialGradient><radialGradient id="i1O0cec" cx="0" cy="0" r="1" gradientTransform="rotate(-154.552 8.314 7.146)scale(2.50907 9.69633)" gradientUnits="userSpaceOnUse"><stop offset=".441" stop-color="#533733"/><stop offset="1" stop-color="#533733" stop-opacity="0"/></radialGradient><radialGradient id="ieNuGAb" cx="0" cy="0" r="1" gradientTransform="matrix(16.62506 -14.2499 14.63588 17.07538 1.812 33.375)" gradientUnits="userSpaceOnUse"><stop stop-color="#988BA4"/><stop offset=".735" stop-color="#988BA4" stop-opacity="0"/></radialGradient><radialGradient id="inlaT7c" cx="0" cy="0" r="1" gradientTransform="rotate(127.405 10.462 10.458)scale(26.7512 21.0614)" gradientUnits="userSpaceOnUse"><stop offset=".57" stop-color="#988BA4" stop-opacity="0"/><stop offset="1" stop-color="#988BA4"/></radialGradient><radialGradient id="iMKYMje" cx="0" cy="0" r="1" gradientTransform="rotate(116.787 9.825 15.05)scale(7.21137 7.21083)" gradientUnits="userSpaceOnUse"><stop stop-color="#F5F1FA"/><stop offset="1" stop-color="#F5F1FA" stop-opacity="0"/></radialGradient><radialGradient id="iMDGZQb" cx="0" cy="0" r="1" gradientTransform="rotate(170.791 11.813 7.974)scale(10.8271 5.27601)" gradientUnits="userSpaceOnUse"><stop stop-color="#F5F1FA"/><stop offset="1" stop-color="#F5F1FA" stop-opacity="0"/></radialGradient><radialGradient id="iSOReld" cx="0" cy="0" r="1" gradientTransform="matrix(-5.875 6.8125 -3.31972 -2.86288 28.375 12.625)" gradientUnits="userSpaceOnUse"><stop stop-color="#F5F1FA"/><stop offset="1" stop-color="#F5F1FA" stop-opacity="0"/></radialGradient><linearGradient id="it4BOSc" x1="5.36" x2="11.5" y1="15" y2="15" gradientUnits="userSpaceOnUse"><stop stop-color="#B0ABAE"/><stop offset=".608" stop-color="#D9CFE3"/><stop offset="1" stop-color="#E2D9EB"/></linearGradient><linearGradient id="impM26b" x1="12.938" x2="11.188" y1="15.5" y2="15" gradientUnits="userSpaceOnUse"><stop stop-color="#B0ABAE"/><stop offset="1" stop-color="#B0ABAE" stop-opacity="0"/></linearGradient><linearGradient id="iLo5gKw" x1="4.594" x2="4.641" y1="10.516" y2="9.625" gradientUnits="userSpaceOnUse"><stop stop-color="#C9A37D"/><stop offset="1" stop-color="#C9A37D" stop-opacity="0"/></linearGradient><linearGradient id="it6Rxlc" x1="7" x2="6.156" y1="2.969" y2="6.25" gradientUnits="userSpaceOnUse"><stop stop-color="#E3B651"/><stop offset="1" stop-color="#E3B651" stop-opacity="0"/></linearGradient><linearGradient id="i2Vef9r" x1="10.339" x2="9.995" y1="6.123" y2="5.904" gradientUnits="userSpaceOnUse"><stop stop-color="#5C5051" stop-opacity="0"/><stop offset="1" stop-color="#5C5051"/></linearGradient><linearGradient id="ixevkeb" x1="18.813" x2="18.813" y1="33.75" y2="27" gradientUnits="userSpaceOnUse"><stop offset=".255" stop-color="#997BB6"/><stop offset="1" stop-color="#BBAACA"/></linearGradient><linearGradient id="ifQQlTb" x1="15.688" x2="15.688" y1="32.938" y2="28.938" gradientUnits="userSpaceOnUse"><stop stop-color="#8E70A9"/><stop offset="1" stop-color="#8E70A9" stop-opacity="0"/></linearGradient><linearGradient id="iEohJuK" x1="26.125" x2="28.063" y1="29.063" y2="16.875" gradientUnits="userSpaceOnUse"><stop stop-color="#9883AD"/><stop offset="1" stop-color="#F8F5FC"/></linearGradient><linearGradient id="iocMEQb" x1="7.355" x2="7.353" y1="13.813" y2="33.52" gradientUnits="userSpaceOnUse"><stop stop-color="#794E49"/><stop offset="1" stop-color="#5B2A3F"/></linearGradient><linearGradient id="iFNr3Fb" x1="27.375" x2="17.063" y1="13.25" y2="27.375" gradientUnits="userSpaceOnUse"><stop stop-color="#EBE7F0"/><stop offset="1" stop-color="#CFC3DD"/></linearGradient><linearGradient id="iYJ4Bfc" x1="11.484" x2="13.906" y1="11.375" y2="5.891" gradientUnits="userSpaceOnUse"><stop stop-color="#629440"/><stop offset="1" stop-color="#629440" stop-opacity="0"/></linearGradient><filter id="iUwW5wc" width="5.05" height="6.47" x="2" y="3.53" 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=".05" dy="-.15"/><feGaussianBlur stdDeviation=".175"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.804167 0 0 0 0 0.580149 0 0 0 0 0.281458 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_28327_4986"/></filter><filter id="iGxIEtb" width="8.96" height="14.75" x="3" y="15" 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=".25"/><feGaussianBlur stdDeviation=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.325 0 0 0 0 0.214519 0 0 0 0 0.201771 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_28327_4986"/></filter><filter id="iGCWz0c" width="17.854" height="13.195" x="9.246" y="13.805" 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=".1" dy="-.15"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.592875 0 0 0 0 0.535503 0 0 0 0 0.645833 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_28327_4986"/></filter><filter id="imVGqyd" width="5.938" height="7.625" x="9.438" y="5.469" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_28327_4986" stdDeviation=".5"/></filter></defs></g></svg>Duck アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:duck" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:duck" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:duck" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--duck]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:duck"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:duck"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/duck.svg" alt="Duck アイコン" width="24" height="24">他のアイコンセットの Duck アイコン
Duck アイコン のよくある質問
Duck アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Duck アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:duck" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Duck アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/duck.svg" alt="Duck アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。