ICONYZ
日本語
Energy Icons の Face Mask 20 Bold アイコン

Face Mask 20 Bold アイコン

energy-icons:face-mask-20-bold

Face Mask 20 Bold アイコン(energy-icons:face-mask-20-bold)は、Energy Icons セットの無料 SVG アイコンです（作者: Sam Passmore）。 20 × 20 のグリッドで描かれています。 Energy Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット
Energy Icons
作者
Sam Passmore
ライセンス
MIT
サイズ
20 × 20
タグ
facemask、maskbold、facemaskbold
SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="M10 4.791c1.181 0 2.37.107 3.433.325c1.053.216 2.027.55 2.747 1.03a.63.63 0 0 1 .278.52v5.833a.63.63 0 0 1-.183.442C14.855 14.361 12.363 15 10 15s-4.855-.637-6.275-2.058a.63.63 0 0 1-.183-.442V6.666c0-.209.105-.404.278-.52c.72-.48 1.693-.814 2.747-1.03A17.4 17.4 0 0 1 10 4.791m0 1.25c-1.11 0-2.214.101-3.182.3c-.819.168-1.511.4-2.026.68v5.204c1.122.974 3.106 1.524 5.208 1.524s4.086-.55 5.208-1.524V7.02c-.515-.28-1.207-.512-2.026-.68A16 16 0 0 0 10 6.04"/><path fill="currentColor" d="M14.167 8.124a.625.625 0 1 1 0 1.25H5.833a.625.625 0 1 1 0-1.25zm0 2.5a.625.625 0 1 1 0 1.25H5.833a.625.625 0 1 1 0-1.25zm-10-2.5c-.431 0-.721.171-.918.417c-.21.262-.332.638-.332 1.042s.123.78.332 1.042c.196.245.487.416.918.416v1.25c-.819 0-1.466-.35-1.895-.886c-.415-.52-.605-1.185-.605-1.822s.19-1.303.605-1.823c.429-.536 1.076-.886 1.895-.886zm11.666-1.25c.819 0 1.466.35 1.894.886c.416.52.606 1.186.606 1.823s-.19 1.303-.605 1.822c-.429.536-1.076.886-1.895.886v-1.25c.43 0 .722-.17.918-.416c.21-.261.332-.638.332-1.042s-.123-.78-.332-1.042c-.197-.246-.487-.417-.918-.417z"/></svg>

Face Mask 20 Bold アイコンの使い方

React

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

<Icon icon="energy-icons:face-mask-20-bold" width="24" />

Vue

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

<template>
  <Icon icon="energy-icons:face-mask-20-bold" width="24" />
</template>

Svelte

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

<Icon icon="energy-icons:face-mask-20-bold" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[energy-icons--face-mask-20-bold]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/energy-icons -->
<div class="i-energy-icons:face-mask-20-bold"></div>

Web コンポーネント

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

<iconify-icon icon="energy-icons:face-mask-20-bold"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/energy-icons/face-mask-20-bold.svg" alt="Face Mask 20 Bold アイコン" width="24" height="24">

Energy Icons の関連アイコン

face-angry-20 アイコン
face-angry-20
 face-angry-20-bold アイコン
face-angry-20-bold
 face-angry-48 アイコン
face-angry-48
 face-angry-48-bold アイコン
face-angry-48-bold
 face-cool-20 アイコン
face-cool-20
 face-cool-20-bold アイコン
face-cool-20-bold
 face-cool-48 アイコン
face-cool-48
 face-cool-48-bold アイコン
face-cool-48-bold
 face-cry-20 アイコン
face-cry-20
 face-cry-20-bold アイコン
face-cry-20-bold
 face-cry-48 アイコン
face-cry-48
 face-cry-48-bold アイコン
face-cry-48-bold
 face-laugh-20 アイコン
face-laugh-20
 face-laugh-20-bold アイコン
face-laugh-20-bold
 face-laugh-48 アイコン
face-laugh-48
 face-laugh-48-bold アイコン
face-laugh-48-bold
 face-love-20 アイコン
face-love-20
 face-love-20-bold アイコン
face-love-20-bold
 face-love-48 アイコン
face-love-48
 face-love-48-bold アイコン
face-love-48-bold
 face-mask-20 アイコン
face-mask-20
 face-mask-48 アイコン
face-mask-48
 face-mask-48-bold アイコン
face-mask-48-bold
 face-shield-20 アイコン
face-shield-20

Face Mask 20 Bold アイコン のよくある質問

Face Mask 20 Bold アイコンは商用利用でも無料ですか?

はい。Energy Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。

React で Face Mask 20 Bold アイコンを使うには?

@iconify/react をインストールして <Icon icon="energy-icons:face-mask-20-bold" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。

Face Mask 20 Bold アイコンをウェブページに追加するには?

画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/energy-icons/face-mask-20-bold.svg" alt="Face Mask 20 Bold アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。

Energy Icons をすべて見る →