Leo アイコン

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

はい。Arcticons は CC BY-SA 4.0 ライセンス で公開されています。作者のクレジットを表記し、アイコンへの変更を同じライセンスで共有すれば、個人・商用プロジェクトで利用できます。

arcticons:leo

Leo アイコン(arcticons:leo)は、Arcticons セットの無料 SVG アイコンです（作者: Donnnno）。 48 × 48 のグリッドで描かれています。 Arcticons は CC BY-SA 4.0 ライセンスで公開されています。作者のクレジットを表記し、アイコンへの変更を同じライセンスで共有すれば、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Arcticons
作者: Donnnno
ライセンス: CC-BY-SA-4.0
サイズ: 48 × 48

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.92 31.12a4.22 4.22 0 0 1-4 2.66c-2.42 0-1.72 4.68-.19 4.69C9 38.48 9 36.38 10 36.38s1.87 5.94 3.88 4.7c1.26-.78.29-3.18-.24-3.81"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M18.6 38.73c-.79 1.42-1.17 2.49-2.27 2.28a3 3 0 0 1-1.9-1.61"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M23.77 38.73c-.86 1.54-3.69 5.55-5.72 4.64c-1.45-.66-1-1.91-.8-2.56m15.8-3.08s2.57 3.62 3.88 2.15c1.84-2.06-3.28-5.82-5.21-6.14c-1.6-.26-1.19-.86-2.87-.86s-1.34.86-3.31.86c-3.23 0-2.75-2.35-7.32-3c-2.52-.37-3.7-3.23-4.7-3.23c-1.31 0-6.2 3.16-5.46 5s2.74.25 2.74.25"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M17.43 33.73a3.83 3.83 0 0 0-1.51 1.49m5.24-.6a6.6 6.6 0 0 1 0 2.18m7.54-.89a13.2 13.2 0 0 0 2 1.91m3.08.81s-.27 4-2.78 4.2s-2.75-2.3-3.21-3.93c-1.1 1.2-2.93 4.62-4.52 3.45c-1.08-.79-.11-2.64-.11-2.64M12.31 24.86c-.64-.52-2.65-2.12-4.25 0s-.25 4 1.38 4.93"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 28.54c-1.69 1.18-1.2 2.75.06 3.14m5.4-16.02c-.41.55-2.8 3.37-4.1 2.06s1.51-4.33 2.78-4.55c-.26-.53-.51-2.23 1.79-1.77c-4.28-2.75-2.84-6.73.12-6.9s3.19 4.62 3.24 5.7c1.36-2.06 3.69-3.46 5.2-3.46s1.83.76 1.83.76a3.86 3.86 0 0 1 2.09-.76c1.11 0 3.8 2.52 5.56 2.52s1.33-2.52 3.23-2.52s3 2.34 2.55 3.59s-3.27 1.87-3.27 2.59s1 1.43 1 2.15s-1.26 1.15-1.26 2.16s5.39 4.38 5.17 8.47c-.18 3.45-2.58 3.34-3.95 5.71a14.3 14.3 0 0 0-1.54 3.32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M36.57 23.79c.32-1.25 2.83-4.05 4.77-2.61m-5.89 4.45c.65.39 4.53.65 6.18.61m-17.79-3.96c-.95-.09-3.44-2.14-3.95-2.79m3.95 5.17c-1.26.17-3.59 0-4.26-.53m16.76 6.13c-1.22.26-4.29.22-6.09-1.24m-16.67-9.4c-.9.69-2.48 1.64-3.1.41a2.08 2.08 0 0 1 .79-2.33"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.45 20.63c-2.28.88-2.2 2.44-1.37 3.17M35.18 9A5.4 5.4 0 0 1 34 10.46M27.86 10a11.1 11.1 0 0 1 3 1.13m-7.17-1.68a6.2 6.2 0 0 0-3.05 2.18"/><ellipse cx="23.03" cy="14.64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" rx="2.23" ry="2.66"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M25.15 13.83c-2.12.29-1.81 2.45-1.36 3.31"/><ellipse cx="29.63" cy="14.64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" rx="2.23" ry="2.66"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M31.75 13.83c-2.12.29-1.81 2.45-1.36 3.31m-4 6.23a49 49 0 0 0 3.86 3.56V29s-.23 1.09-3.32 1.09s-3-2.22-5.68-2.61s-5.14-2.67-5.14-3.37a2.64 2.64 0 0 1 1.32-2.06"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M34.41 23.31a31 31 0 0 0-4.16 3.62"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M27.57 24.57c1.06.05 5-.09 5.28-.05M13.93 7.45a7 7 0 0 0 .89 2.3"/></svg>

Leo アイコンの使い方

React

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

<Icon icon="arcticons:leo" width="24" />

Vue

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

<template>
  <Icon icon="arcticons:leo" width="24" />
</template>

Svelte

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

<Icon icon="arcticons:leo" width="24" />

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

<iconify-icon icon="arcticons:leo"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/arcticons/leo.svg" alt="Leo アイコン" width="24" height="24">

Arcticons の関連アイコン

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

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

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

はい。Arcticons は CC BY-SA 4.0 ライセンスで公開されています。作者のクレジットを表記し、アイコンへの変更を同じライセンスで共有すれば、個人・商用プロジェクトで利用できます。

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

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

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

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

Arcticons をすべて見る →