Atom アイコン

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

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

boxicons:atom

Atom アイコン(boxicons:atom)は、Boxicons セットの無料 SVG アイコンです。 24 × 24 のグリッドで描かれています。 Boxicons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Boxicons
作者: Boxicons
ライセンス: MIT
サイズ: 24 × 24

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19.62 12s.08-.1.11-.14c1.34-1.84 1.67-3.57.93-4.86c-.78-1.35-2.58-1.87-4.85-1.6C14.91 3.3 13.56 2 12 2S9.09 3.3 8.19 5.4c-2.27-.27-4.07.25-4.85 1.6c-.74 1.29-.41 3.01.93 4.86c.04.05.08.1.11.14c-.04.05-.08.1-.11.14c-1.34 1.84-1.67 3.57-.93 4.86c.65 1.12 2 1.68 3.74 1.68c.35 0 .73-.03 1.11-.08c.9 2.1 2.25 3.4 3.81 3.4s2.91-1.3 3.81-3.4c.38.05.76.08 1.11.08c1.74 0 3.09-.55 3.74-1.68c.74-1.29.41-3.01-.93-4.86c-.04-.05-.08-.1-.11-.14m-2.66-4.67c1.02 0 1.73.25 1.97.67c.29.5.03 1.44-.67 2.47c-.44-.43-.92-.85-1.44-1.25c-.09-.65-.21-1.28-.35-1.86c.17-.01.34-.02.5-.02ZM13.5 14.6c-.51.3-1.01.55-1.5.78c-.49-.23-.99-.48-1.5-.78c-.5-.29-.97-.59-1.43-.91C9.02 13.15 9 12.59 9 12s.03-1.15.07-1.69c.45-.32.93-.62 1.43-.91c.51-.3 1.01-.55 1.5-.77c.49.23.99.48 1.5.77c.5.29.97.59 1.43.91c.05.54.07 1.1.07 1.69s-.03 1.15-.07 1.69c-.45.32-.93.62-1.43.91M12 4c.56 0 1.23.65 1.79 1.81c-.58.17-1.18.38-1.79.63c-.61-.25-1.21-.46-1.79-.63C10.78 4.65 11.45 4 12 4M5.07 8c.24-.42.94-.67 1.97-.67c.16 0 .33.01.5.02c-.15.59-.27 1.21-.35 1.86c-.52.4-1 .82-1.44 1.25c-.7-1.03-.96-1.97-.67-2.47Zm0 8c-.29-.5-.03-1.44.67-2.47c.44.43.92.85 1.44 1.25c.09.65.21 1.28.35 1.86c-1.29.09-2.19-.16-2.47-.65ZM12 20c-.56 0-1.23-.65-1.79-1.82c.58-.17 1.18-.38 1.79-.63c.61.25 1.21.46 1.79.63C13.22 19.34 12.55 20 12 20m6.93-4c-.28.48-1.18.74-2.47.65c.15-.59.27-1.21.35-1.86c.52-.4 1-.82 1.44-1.25c.7 1.03.96 1.97.67 2.47Z"/><path fill="currentColor" d="M12 10.5a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3"/></svg>

Atom アイコンの使い方

React

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

<Icon icon="boxicons:atom" width="24" />

Vue

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

<template>
  <Icon icon="boxicons:atom" width="24" />
</template>

Svelte

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

<Icon icon="boxicons:atom" width="24" />

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

<iconify-icon icon="boxicons:atom"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/boxicons/atom.svg" alt="Atom アイコン" width="24" height="24">

Boxicons の関連アイコン

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

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

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

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

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

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

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

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

Boxicons をすべて見る →