ICONYZ
日本語
Energy Icons の Teapot 20 アイコン

Teapot 20 アイコン

energy-icons:teapot-20

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

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

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="m13.334 7l.097.01a.5.5 0 0 1 .256.136c1.778 1.779 2.684 4.464 1.791 7.164h.001c-.347 1.157-1.049 2.095-2.124 2.734c-1.064.633-2.463.956-4.187.956s-3.124-.323-4.189-.956c-1.075-.64-1.778-1.577-2.125-2.734h.001c-.893-2.7.014-5.385 1.792-7.164l.076-.062A.5.5 0 0 1 5.001 7zM5.216 8c-1.457 1.55-2.15 3.783-1.409 6.009l.005.014c.278.927.826 1.655 1.678 2.162c.863.512 2.068.815 3.678.815c1.608 0 2.813-.303 3.675-.815c.852-.507 1.4-1.235 1.678-2.162l.005-.014c.741-2.226.05-4.46-1.408-6.009z"/><path fill="currentColor" d="M9.167 4.5c.91 0 1.761.227 2.396.734c.65.52 1.02 1.295 1.02 2.266h-1c0-.695-.254-1.17-.645-1.484c-.407-.326-1.014-.516-1.77-.516c-.758 0-1.365.19-1.772.516c-.392.313-.646.789-.646 1.484h-1c0-.972.372-1.746 1.022-2.266c.635-.507 1.486-.734 2.395-.734"/><path fill="currentColor" d="M9.667 3.75V5h-1V3.75z"/><path fill="currentColor" d="M9.5 2.916a.333.333 0 1 0-.666-.001a.333.333 0 0 0 .666.001m1 0a1.333 1.333 0 1 1-2.666 0a1.333 1.333 0 0 1 2.666 0m7.537 4.182a.5.5 0 1 1 .593.804l-3.395 2.5l-.594-.804zM3.766 9.668c-.73 0-1.232.224-1.557.52c-.33.3-.506.7-.537 1.102a1.5 1.5 0 0 0 .32 1.072c.227.27.589.472 1.124.472v1c-.814 0-1.463-.32-1.89-.83a2.5 2.5 0 0 1-.552-1.792a2.66 2.66 0 0 1 .862-1.763c.532-.485 1.285-.781 2.23-.781z"/></svg>

Teapot 20 アイコンの使い方

React

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

<Icon icon="energy-icons:teapot-20" width="24" />

Vue

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

<template>
  <Icon icon="energy-icons:teapot-20" width="24" />
</template>

Svelte

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

<Icon icon="energy-icons:teapot-20" width="24" />

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

<iconify-icon icon="energy-icons:teapot-20"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/energy-icons/teapot-20.svg" alt="Teapot 20 アイコン" width="24" height="24">

Energy Icons の関連アイコン

Teapot 20 アイコン のよくある質問

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

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

React で Teapot 20 アイコンを使うには?

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

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

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

Energy Icons をすべて見る →