Affine アイコン

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

はい。selfh.st/icons は CC BY 4.0 ライセンス で公開されています。作者のクレジットを表記すれば、個人・商用プロジェクトで利用できます。

selfhst:affine

Affine アイコン(selfhst:affine)は、selfh.st/icons セットの無料 SVG アイコンです（作者: selfh.st）。 512 × 512 のグリッドで描かれています。 selfh.st/icons は CC BY 4.0 ライセンスで公開されています。作者のクレジットを表記すれば、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: selfh.st/icons
作者: selfh.st
ライセンス: CC-BY-4.0
サイズ: 512 × 512

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M508.1 438.3c-8.9-15.4-23.6-41-38.2-66.2c-4.4-7.7-8.8-15.3-13-22.6c-8.7-15-16.6-28.7-22.2-38.5c-39.1-67.6-116.1-201.4-154.5-267.5c-11.9-18.4-39.3-17-49.5 2.1c-11.7 20.1-24.4 42.1-37.9 65.4c-4.3 7.4-8.6 14.9-13 22.5c-56 97-121.6 210.6-168.3 291.5c-2.4 4.3-6.8 11.4-9 16c-3.9 8.4-3.1 18.9 1.8 26.7c5.5 9.2 15.9 14.3 26.4 13.7h100.7c121.2 0 306.4.1 351.9 0c22 .2 35.8-24.1 24.8-43.1m-261-85.9l-22.3-38.7c-3.9-6.8 1-15.3 8.8-15.3h44.6c7.9 0 12.8 8.5 8.8 15.3l-22.3 38.7c-3.8 6.8-13.6 6.8-17.6 0m-37.4-72q-2.7-7.05-4.8-14.4l73.8 14.4zm33.8 101.7c-3.1 4-6.5 7.7-10 11.3L209 322.3zm71.2-80c5 .7 9.9 1.8 14.8 3.1L280.2 362zm-114.3-60.3c-.8-7.2-1.1-14.4-1.1-21.7l97.5 47.6zm-11.5 71.3l25.8 96.4c-5.8 4.3-11.9 8.2-18.3 11.8zm163.9.2c6.6 2.9 13.1 6.2 19.4 9.9l-89.9 60.7zM201.6 189.4c1.8-13.2 4.5-26.2 7.9-38.7l148.1 128.8zm-32.8 245.3c-12.3 5.1-25 9.2-37.4 12.5l37.4-192.6zm228.8-94.2c10.5 8.2 20.4 17.1 29.6 26.2l-185.6 63.9zM262.4 78.3c27.3 47.4 67 116.1 104.7 181.5l-141-141c8.3-14.3 16.1-28 23.4-40.5c2.9-4.9 10.1-4.9 12.9 0M42.2 437.5c7.8-13.4 18.4-31.8 20.8-36c22.5-38.9 52.8-91.4 84-145.5L95.4 448.7H48.7c-5.8 0-9.4-6.2-6.5-11.2m421.1 11.2H253.6L446.4 397c10.1 17.5 18.2 31.5 23.4 40.5c2.9 5-.7 11.2-6.5 11.2"/></svg>

Affine アイコンの使い方

React

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

<Icon icon="selfhst:affine" width="24" />

Vue

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

<template>
  <Icon icon="selfhst:affine" width="24" />
</template>

Svelte

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

<Icon icon="selfhst:affine" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[selfhst--affine]"></span>

UnoCSS

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

Web コンポーネント

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

<iconify-icon icon="selfhst:affine"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/selfhst/affine.svg" alt="Affine アイコン" width="24" height="24">

selfh.st/icons の関連アイコン

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

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

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

はい。selfh.st/icons は CC BY 4.0 ライセンスで公開されています。作者のクレジットを表記すれば、個人・商用プロジェクトで利用できます。

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

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

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

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

selfh.st/icons をすべて見る →