Sun アイコン

circum:sun

Sun アイコン(circum:sun)は、Circum Icons セットの無料 SVG アイコンです（作者: Klarr Agency）。 24 × 24 のグリッドで描かれています。 Circum Icons は Mozilla Public License 2.0 で公開されており、個人・商用プロジェクトで利用できます。ただし、アイコンファイルを改変した場合は同じライセンスを維持する必要があります。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Circum Icons
作者: Klarr Agency
ライセンス: MPL-2.0
サイズ: 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="M12 20.937a1.07 1.07 0 0 1-.94-.542L9.61 17.9a.084.084 0 0 0-.1-.041l-2.782.741A1.087 1.087 0 0 1 5.4 17.272l.748-2.8a.09.09 0 0 0-.041-.1l-2.5-1.439a1.086 1.086 0 0 1 0-1.881L6.1 9.61a.09.09 0 0 0 .041-.1L5.4 6.728A1.087 1.087 0 0 1 6.728 5.4l2.8.748a.09.09 0 0 0 .1-.041l1.439-2.5A1.08 1.08 0 0 1 12 3.063a1.07 1.07 0 0 1 .94.542L14.39 6.1a.084.084 0 0 0 .1.041l2.782-.741A1.087 1.087 0 0 1 18.6 6.728l-.748 2.8a.09.09 0 0 0 .041.1l2.5 1.439a1.086 1.086 0 0 1 0 1.881L17.9 14.39a.09.09 0 0 0-.041.1l.748 2.784a1.087 1.087 0 0 1-1.335 1.326l-2.8-.748a.09.09 0 0 0-.1.041l-1.439 2.5a1.08 1.08 0 0 1-.94.544Zm-2.466-4.084a1.09 1.09 0 0 1 .942.541l1.448 2.5a.08.08 0 0 0 .075.043a.08.08 0 0 0 .074-.043l1.44-2.5a1.08 1.08 0 0 1 1.221-.507l2.8.747a.087.087 0 0 0 .106-.106l-.747-2.785a1.09 1.09 0 0 1 .5-1.222l2.5-1.448a.086.086 0 0 0 0-.15l-2.5-1.439a1.086 1.086 0 0 1-.507-1.221l.747-2.8a.08.08 0 0 0-.022-.083a.09.09 0 0 0-.085-.023l-2.784.747a1.09 1.09 0 0 1-1.222-.5l-1.448-2.5A.08.08 0 0 0 12 4.063a.08.08 0 0 0-.074.043l-1.44 2.5a1.09 1.09 0 0 1-1.222.507l-2.8-.747a.087.087 0 0 0-.106.106l.752 2.782a1.09 1.09 0 0 1-.5 1.222l-2.5 1.448a.08.08 0 0 0-.047.076a.08.08 0 0 0 .043.074l2.5 1.44a1.09 1.09 0 0 1 .507 1.221l-.747 2.8a.08.08 0 0 0 .022.083a.09.09 0 0 0 .085.023l2.784-.747a1 1 0 0 1 .277-.041"/><path fill="currentColor" d="M12 15.875A3.875 3.875 0 1 1 15.875 12A3.88 3.88 0 0 1 12 15.875m0-6.75A2.875 2.875 0 1 0 14.875 12A2.88 2.88 0 0 0 12 9.125"/></svg>

Sun アイコンの使い方

React

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

<Icon icon="circum:sun" width="24" />

Vue

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

<template>
  <Icon icon="circum:sun" width="24" />
</template>

Svelte

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

<Icon icon="circum:sun" width="24" />

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

<iconify-icon icon="circum:sun"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/circum/sun.svg" alt="Sun アイコン" width="24" height="24">

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

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

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

はい。Circum Icons は Mozilla Public License 2.0 で公開されており、個人・商用プロジェクトで利用できます。ただし、アイコンファイルを改変した場合は同じライセンスを維持する必要があります。

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

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

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

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

Circum Icons をすべて見る →