Trash アイコン

Q: Trash アイコンは商用利用でも無料ですか?

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

flat-ui:trash

Trash アイコン(flat-ui:trash)は、Flat UI Icons セットの無料 SVG アイコンです（作者: Designmodo, Inc.）。 100 × 100 のグリッドで描かれています。 Flat UI Icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Flat UI Icons
作者: Designmodo, Inc.
ライセンス: MIT
サイズ: 100 × 100

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="#3498DB" d="M50 0c27.613 0 50 22.386 50 50s-22.387 50-50 50C22.386 100 0 77.615 0 50S22.386 0 50 0"/><defs><circle id="SVGifCBlePx" cx="50" cy="50" r="50"/></defs><clipPath id="SVGtcVZrdEc"><use href="#SVGifCBlePx"/></clipPath><path fill="#2980B9" d="M0 100h31L20 49L0 69z" clip-path="url(#SVGtcVZrdEc)"/><defs/><path fill="#EBEDEE" d="M74.736 100L80 50H20l5.263 50z" clip-path="url(#SVGtcVZrdEc)"/><defs/><path fill="#C3C9CD" d="M50 100V50H20l5.172 50z" clip-path="url(#SVGtcVZrdEc)"/><defs/><g clip-path="url(#SVGtcVZrdEc)"><path fill="#95A5A6" d="m79.982 50.801l-.26.004C77.756 53.738 65.203 56 50 56c-15.15 0-27.67-2.246-29.704-5.164h-.285C19.956 50.834 20 53.945 20 54c0 3.314 13.432 6 30 6s30-2.686 30-6c0-.066.038-3.238-.018-3.199"/><path fill="#7F8C8D" d="M50.078 60h-.357C33.281 59.971 20 57.295 20 54c0-.055-.044-3.166.011-3.164c.01 0 15.013 0 30.009-.005c.024.009.08 9.185.058 9.169"/><path fill="#EBEDEE" d="M50 44c16.568 0 30 2.687 30 6s-13.432 6-30 6s-30-2.686-30-6s13.432-6 30-6"/><path fill="#F1C40E" d="M50 56c7.678 0 14.678-.577 19.98-1.525l-9.48-9.479l-11.005 11.002z"/><path fill="#fff" d="M50 56c4.227 0 8.247-.175 11.895-.49L46 39.615L30.978 54.639C36.154 55.488 42.776 56 50 56"/></g><defs/><path fill="#95A5A6" d="M33.628 100L32 65a2 2 0 0 0-4 0l1.628 35z" clip-path="url(#SVGtcVZrdEc)"/><defs/><path fill="#BDC3C7" d="M69.372 100L71 65a2 2 0 0 0-4 0l-1.628 35z" clip-path="url(#SVGtcVZrdEc)"/><defs/><path fill="#BDC3C7" d="M59.21 100L60 66a2 2 0 0 0-4 0l-.79 34z" clip-path="url(#SVGtcVZrdEc)"/><defs/><path fill="#95A5A6" d="M43.791 100L43 66a2 2 0 0 0-4 0l.791 34z" clip-path="url(#SVGtcVZrdEc)"/></svg>

Trash アイコンの使い方

React

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

<Icon icon="flat-ui:trash" width="24" />

Vue

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

<template>
  <Icon icon="flat-ui:trash" width="24" />
</template>

Svelte

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

<Icon icon="flat-ui:trash" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[flat-ui--trash]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/flat-ui -->
<div class="i-flat-ui:trash"></div>

Web コンポーネント

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

<iconify-icon icon="flat-ui:trash"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/flat-ui/trash.svg" alt="Trash アイコン" width="24" height="24">

他のアイコンセットの Trash アイコン

Trash アイコンのよくある質問

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

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

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

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

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

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

Flat UI Icons をすべて見る →