Electron アイコン

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

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

thesvg-color:electron

Electron アイコン(thesvg-color:electron)は、theSVG Color セットの無料 SVG アイコンです（作者: thesvg.org）。 128 × 128 のグリッドで描かれています。 theSVG Color icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: theSVG Color
作者: thesvg.org
ライセンス: MIT
サイズ: 128 × 128

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><circle cx="64" cy="64" r="64" fill="#2f3242"/><path fill="#a2ecfb" d="M51.395 39.503a1.8 1.8 0 0 0 .646-3.542zm-22.78 4.072l1.56.9zm.324 17.36a1.8 1.8 0 0 0 3.125-1.788l-3.125 1.789Zm8.755 5.81a1.8 1.8 0 0 0-2.665 2.422zm16.055 14.956l-.901 1.559l.9-1.559Zm43.172 7.814a1.8 1.8 0 1 0-2.03-2.973zM52.04 35.961c-5.57-1.016-10.756-1.064-15.067-.023c-4.32 1.043-7.89 3.22-9.918 6.738l3.119 1.798c1.394-2.42 3.97-4.15 7.644-5.037c3.682-.89 8.336-.89 13.576.066zm-24.985 6.715c-3.013 5.227-1.778 11.864 1.883 18.26l3.125-1.789c-3.406-5.95-3.955-11.089-1.89-14.673zm7.973 26.49c4.61 5.074 10.687 9.97 17.819 14.094l1.802-3.117c-6.842-3.956-12.62-8.624-16.956-13.397zm17.82 14.094c8.496 4.913 17.198 7.984 24.887 9.1c7.624 1.108 14.54.328 19.186-2.845l-2.03-2.973c-3.566 2.435-9.4 3.307-16.639 2.256c-7.173-1.041-15.443-3.937-23.602-8.655zm52.511 1.648a6.29 6.29 0 0 0-6.288-6.295v3.6a2.69 2.69 0 0 1 2.688 2.695zm-6.288-6.295a6.29 6.29 0 0 0-6.288 6.295h3.6a2.69 2.69 0 0 1 2.688-2.695zm-6.288 6.295a6.29 6.29 0 0 0 6.288 6.295v-3.6a2.69 2.69 0 0 1-2.688-2.695zm6.288 6.295a6.29 6.29 0 0 0 6.288-6.295h-3.6a2.69 2.69 0 0 1-2.688 2.695z"/><path fill="#a2ecfb" d="M91.487 65.382a1.8 1.8 0 1 0 2.75 2.324zm7.83-21.747l-1.56.9zm-14.81-8.394a1.8 1.8 0 1 0-.047 3.6zm-9.566 4.64a1.8 1.8 0 0 0-.756-3.52zm-21.157 6.492l.9 1.558zM25.549 80.905a1.8 1.8 0 0 0 3.562-.522zm68.688-13.2c3.647-4.314 6.268-8.778 7.515-13.027c1.249-4.257 1.148-8.43-.876-11.941l-3.119 1.797c1.392 2.415 1.603 5.508.54 9.13c-1.065 3.63-3.379 7.658-6.81 11.718zm6.639-24.968c-2.964-5.143-9.168-7.402-16.369-7.496l-.047 3.6c6.673.087 11.266 2.17 13.297 5.693zm-26.69-6.377c-6.75 1.449-14.098 4.288-21.303 8.455l1.802 3.116c6.912-3.997 13.91-6.69 20.256-8.05l-.756-3.52Zm-21.303 8.455c-8.746 5.057-15.916 11.28-20.734 17.578c-4.772 6.237-7.434 12.819-6.6 18.512l3.562-.522c-.627-4.28 1.364-9.877 5.897-15.803c4.488-5.866 11.276-11.791 19.677-16.649z"/><path fill="#a2ecfb" d="M49.083 87.23a1.8 1.8 0 1 0-3.39 1.212zm29.48 9.196a1.8 1.8 0 0 0-3.086-1.853l3.087 1.853ZM79.57 85.18a1.8 1.8 0 1 0 3.436 1.073zm4.813-21.113h-1.8zM69.156 22.53a1.8 1.8 0 1 0-1.463 3.29zM45.693 88.442c1.906 5.332 4.457 9.849 7.51 13.063c3.06 3.219 6.725 5.226 10.78 5.226v-3.6c-2.785 0-5.566-1.366-8.17-4.106c-2.609-2.746-4.936-6.777-6.73-11.796zm18.29 18.289c5.886 0 10.91-4.189 14.58-10.305l-3.086-1.853c-3.399 5.662-7.465 8.558-11.494 8.558zm19.023-20.478c2.02-6.467 3.177-14.07 3.177-22.186h-3.6c0 7.787-1.11 15.025-3.013 21.113zm3.177-22.186c0-9.953-1.74-19.145-4.687-26.417c-2.921-7.206-7.152-12.813-12.34-15.12l-1.463 3.29c3.943 1.753 7.692 6.336 10.467 13.183c2.749 6.78 4.423 15.504 4.423 25.064z"/><path fill-rule="evenodd" stroke="#a2ecfb" stroke-linecap="round" stroke-width="3.6" d="M103.559 84.908a4.49 4.49 0 0 0-4.488-4.495a4.49 4.49 0 0 0-4.488 4.495a4.49 4.49 0 0 0 4.488 4.495a4.49 4.49 0 0 0 4.488-4.495zm-74.745 4.495a4.49 4.49 0 0 0 4.488-4.495a4.49 4.49 0 0 0-4.488-4.495a4.49 4.49 0 0 0-4.488 4.495a4.49 4.49 0 0 0 4.488 4.495z" clip-rule="evenodd"/><ellipse cx="63.983" cy="23.204" stroke="#a2ecfb" stroke-linecap="round" stroke-width="3.6" rx="4.488" ry="4.495"/><path fill="#a2ecfb" fill-rule="evenodd" d="M64.85 68.086a4.112 4.112 0 0 1-1.733-8.037a4.105 4.105 0 0 1 4.878 3.15a4.11 4.11 0 0 1-3.145 4.887" clip-rule="evenodd"/></svg>

Electron アイコンの使い方

React

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

<Icon icon="thesvg-color:electron" width="24" />

Vue

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

<template>
  <Icon icon="thesvg-color:electron" width="24" />
</template>

Svelte

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

<Icon icon="thesvg-color:electron" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--electron]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:electron"></div>

Web コンポーネント

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

<iconify-icon icon="thesvg-color:electron"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/thesvg-color/electron.svg" alt="Electron アイコン" width="24" height="24">

theSVG Color の関連アイコン

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

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

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

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

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

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

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

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

theSVG Color アイコンをすべて見る →