Locked アイコン
fluent-emoji:locked
Locked アイコン(fluent-emoji:locked)は、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"><g filter="url(#iRtQHNb)"><path stroke="#C2C2C6" stroke-width="2.75" d="M10.953 14.14V8.579a5.016 5.016 0 0 1 10.031 0v5.563"/></g><path stroke="url(#iG2a8zd)" stroke-width="2.75" d="M10.953 14.14V8.579a5.016 5.016 0 0 1 10.031 0v5.563"/><g filter="url(#ibUu2be)"><path stroke="url(#iiW3Mfb)" d="M11.344 14.14V8.38c0-2.867 2.294-5.193 5.125-5.193s5.125 2.326 5.125 5.194v5.76"/><path stroke="url(#i1I2SJc)" d="M11.344 14.14V8.38c0-2.867 2.294-5.193 5.125-5.193s5.125 2.326 5.125 5.194v5.76"/></g><g filter="url(#iYsUKje)"><rect width="21.938" height="18.844" x="5.031" y="11.125" fill="url(#iLvTpbd)" rx="3"/></g><rect width="21.938" height="18.844" x="5.031" y="11.125" fill="url(#iTRcheb)" rx="3"/><rect width="21.938" height="18.844" x="5.031" y="11.125" fill="url(#iMXrITc)" rx="3"/><rect width="21.938" height="18.844" x="5.031" y="11.125" fill="url(#iDw3S8d)" rx="3"/><g stroke-width="1.75" filter="url(#i6O91td)"><path stroke="url(#itGG8Sd)" d="M17.398 20.462a2.607 2.607 0 1 0-2.797.017v3.294a1.398 1.398 0 0 0 2.797 0z"/><path stroke="url(#iQA1qLc)" d="M17.398 20.462a2.607 2.607 0 1 0-2.797.017v3.294a1.398 1.398 0 0 0 2.797 0z"/></g><path fill="url(#iDZZjrf)" d="M17.398 20.462a2.607 2.607 0 1 0-2.797.017v3.294a1.398 1.398 0 0 0 2.797 0z"/><defs><radialGradient id="iG2a8zd" cx="0" cy="0" r="1" gradientTransform="matrix(0 -4.84375 5.28858 0 15.969 7.656)" gradientUnits="userSpaceOnUse"><stop offset=".531" stop-color="#AB83C0"/><stop offset="1" stop-color="#CBBBDC" stop-opacity="0"/></radialGradient><radialGradient id="iiW3Mfb" cx="0" cy="0" r="1" gradientTransform="matrix(-3.81893 3.59375 -4.9365 -5.24582 21.9 4.594)" gradientUnits="userSpaceOnUse"><stop offset=".216" stop-color="#EDECF3"/><stop offset="1" stop-color="#EDECF3" stop-opacity="0"/></radialGradient><radialGradient id="i1I2SJc" cx="0" cy="0" r="1" gradientTransform="matrix(0 -7.125 5.16319 0 12.55 12.656)" gradientUnits="userSpaceOnUse"><stop stop-color="#EDECF3"/><stop offset="1" stop-color="#EDECF3" stop-opacity="0"/></radialGradient><radialGradient id="iTRcheb" cx="0" cy="0" r="1" gradientTransform="matrix(-2.18751 -2.40624 5.60574 -5.09619 26.406 29.969)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8650"/><stop offset="1" stop-color="#FF8650" stop-opacity="0"/></radialGradient><radialGradient id="iDw3S8d" cx="0" cy="0" r="1" gradientTransform="rotate(126.254 10.51 12.316)scale(2.32513 5.25171)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF760"/><stop offset="1" stop-color="#FFF760" stop-opacity="0"/></radialGradient><radialGradient id="iDZZjrf" cx="0" cy="0" r="1" gradientTransform="rotate(34.061 -23.815 31.182)scale(5.69121 7.82719)" gradientUnits="userSpaceOnUse"><stop offset=".217" stop-color="#564F80"/><stop offset="1" stop-color="#473154"/></radialGradient><linearGradient id="iLvTpbd" x1="10.156" x2="17.094" y1="14.188" y2="29.969" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC74E"/><stop offset="1" stop-color="#F7864E"/></linearGradient><linearGradient id="iMXrITc" x1="16" x2="16" y1="10.813" y2="12.313" gradientUnits="userSpaceOnUse"><stop stop-color="#F3D04E"/><stop offset="1" stop-color="#F3D04E" stop-opacity="0"/></linearGradient><linearGradient id="itGG8Sd" x1="19.125" x2="15.25" y1="21.75" y2="21.75" gradientUnits="userSpaceOnUse"><stop offset=".331" stop-color="#D98A40"/><stop offset="1" stop-color="#D98A40" stop-opacity="0"/></linearGradient><linearGradient id="iQA1qLc" x1="12.875" x2="15.594" y1="20.813" y2="20.813" gradientUnits="userSpaceOnUse"><stop stop-color="#FFCD63"/><stop offset="1" stop-color="#FFCD63" stop-opacity="0"/></linearGradient><filter id="iRtQHNb" width="13.781" height="11.953" x="9.578" y="2.188" 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"/><feGaussianBlur stdDeviation=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.560784 0 0 0 0 0.556863 0 0 0 0 0.576471 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_23511"/></filter><filter id="ibUu2be" width="12.75" height="12.953" x="10.094" y="1.938" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_23511" stdDeviation=".375"/></filter><filter id="iYsUKje" width="23.438" height="20.344" x="4.281" y="10.375" 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 dy="-.75"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.898039 0 0 0 0 0.364706 0 0 0 0 0.423529 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_23511"/><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"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.772549 0 0 0 0 0.364706 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_23511" result="effect2_innerShadow_18_23511"/><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 dy="1"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.843137 0 0 0 0 0.266667 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_23511" result="effect3_innerShadow_18_23511"/><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=".75"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.729412 0 0 0 0 0.478431 0 0 0 0 0.207843 0 0 0 1 0"/><feBlend in2="effect3_innerShadow_18_23511" result="effect4_innerShadow_18_23511"/></filter><filter id="i6O91td" width="7.965" height="12.26" x="12.004" y="14.287" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_23511" stdDeviation=".25"/></filter></defs></g></svg>Locked アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:locked" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:locked" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:locked" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--locked]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:locked"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:locked"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/locked.svg" alt="Locked アイコン" width="24" height="24">Fluent Emoji の関連アイコン
他のアイコンセットの Locked アイコン
Locked アイコン のよくある質問
Locked アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Locked アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:locked" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Locked アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/locked.svg" alt="Locked アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。