Edge アイコン

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

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

grommet-icons:edge

Edge アイコン(grommet-icons:edge)は、Grommet Icons セットの無料 SVG アイコンです（作者: Grommet）。 24 × 24 のグリッドで描かれています。 Grommet Icons は Apache 2.0 ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Grommet Icons
作者: Grommet
ライセンス: Apache-2.0
サイズ: 24 × 24

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><g clip-path="url(#SVGXv8lpc2Y)"><path fill="url(#SVGvmGcxcOm)" d="M21.666 17.873c-.32.165-.65.308-.991.44a9.6 9.6 0 0 1-3.369.606c-4.437 0-8.3-3.05-8.3-6.97c0-1.102.638-2.06 1.54-2.556c-4.018.166-5.042 4.35-5.042 6.795c0 6.927 6.386 7.632 7.762 7.632c.737 0 1.86-.22 2.532-.43a.5.5 0 0 0 .12-.044a12.07 12.07 0 0 0 6.243-4.956c.21-.319-.154-.704-.495-.517"/><path fill="url(#SVG9zbyNd0P)" d="M9.908 22.641a7.4 7.4 0 0 1-2.136-2.004a7.62 7.62 0 0 1-1.42-4.449a7.62 7.62 0 0 1 2.896-6.002a7.7 7.7 0 0 1 1.288-.804c.297-.143.792-.385 1.453-.374c1.1.011 1.937.573 2.41 1.211a3.02 3.02 0 0 1 .595 1.751c0-.022 2.29-7.466-7.508-7.466C3.391 4.504 0 8.414 0 11.849c0 2.17.506 3.91 1.134 5.253a12.07 12.07 0 0 0 7.21 6.343a11.9 11.9 0 0 0 3.667.573c1.32 0 2.598-.22 3.798-.617a7.1 7.1 0 0 1-2.136.33a7.2 7.2 0 0 1-3.765-1.09"/><path fill="url(#SVGsWagebqc)" d="M14.279 13.964c-.077.099-.309.23-.309.528c0 .242.154.485.44.683c1.355.936 3.887.815 3.898.815c1.046 0 1.992-.297 2.84-.782c.386-.22.738-.496 1.057-.793c1.101-1.046 1.773-2.522 1.795-4.163c.022-2.103-.75-3.502-1.068-4.118C20.95 2.235 16.668 0 12 0C5.427 0 .088 5.286 0 11.838c.044-3.425 3.446-6.2 7.497-6.2c.33 0 2.202.033 3.941.947c1.53.804 2.334 1.773 2.896 2.742c.583 1.002.682 2.269.682 2.764c0 .496-.264 1.256-.737 1.873"/></g><defs><linearGradient id="SVGvmGcxcOm" x1="5.501" x2="22.225" y1="16.605" y2="16.605" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"/><stop offset="1" stop-color="currentColor"/></linearGradient><linearGradient id="SVG9zbyNd0P" x1="14.318" x2="3.868" y1="9.347" y2="20.726" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"/><stop offset=".162" stop-color="currentColor"/><stop offset=".667" stop-color="currentColor"/><stop offset="1" stop-color="currentColor"/></linearGradient><radialGradient id="SVGsWagebqc" cx="0" cy="0" r="1" gradientTransform="rotate(92.128 -.93 3.333)scale(18.9898 40.4341)" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"/><stop offset=".111" stop-color="currentColor"/><stop offset=".232" stop-color="currentColor"/><stop offset=".315" stop-color="currentColor"/><stop offset=".673" stop-color="currentColor"/><stop offset="1" stop-color="currentColor"/></radialGradient><clipPath id="SVGXv8lpc2Y"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>

Edge アイコンの使い方

React

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

<Icon icon="grommet-icons:edge" width="24" />

Vue

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

<template>
  <Icon icon="grommet-icons:edge" width="24" />
</template>

Svelte

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

<Icon icon="grommet-icons:edge" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[grommet-icons--edge]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/grommet-icons -->
<div class="i-grommet-icons:edge"></div>

Web コンポーネント

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

<iconify-icon icon="grommet-icons:edge"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/grommet-icons/edge.svg" alt="Edge アイコン" width="24" height="24">

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

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

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

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

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

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

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

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

Grommet Icons をすべて見る →