Weather アイコン

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

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

flat-ui:weather

Weather アイコン(flat-ui:weather)は、Flat UI Icons セットの無料 SVG アイコンです（作者: Designmodo, Inc.）。 100 × 100 のグリッドで描かれています。 Flat UI Icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Flat UI Icons
作者: Designmodo, Inc.
ライセンス: MIT
サイズ: 100 × 100

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><use href="#SVG2lLLgU3u"/><use href="#SVG2lLLgU3u"/><use href="#SVGGW9ljcnp"/><use href="#SVGGW9ljcnp"/><path fill="#F6D759" d="M50 14c19.882 0 36 16.117 36 36S69.882 86 50 86S14 69.882 14 50s16.117-36 36-36"/><path fill="#DDC14E" d="M54 82c-19.882 0-36-16.118-36-36c0-8.923 3.253-17.081 8.629-23.371C18.902 29.232 14 39.041 14 50c0 19.882 16.118 36 36 36c10.973 0 20.781-4.917 27.387-12.655C71.094 78.732 62.934 82 54 82"/><path fill="#C5AE47" d="M77.387 73.345C71.094 78.733 62.934 82 53.999 82c-13.017 0-24.417-6.909-30.741-17.259l-4 4C25.582 79.091 36.982 86 49.999 86c10.972 0 20.782-4.917 27.388-12.655"/><defs><path id="SVG2lLLgU3u" fill="#CAA40B" d="M45.087 11.319A39 39 0 0 1 50 11c2.033 0 4.029.156 5.979.456L50.5 0zM0 49.5l11.318 5.413A39 39 0 0 1 11 50c0-2.033.156-4.03.456-5.979zm19.082-23.26a39.2 39.2 0 0 1 7.766-7.621l-11.703-3.976zm62.104.34l4.67-11.937l-11.846 4.636a39.3 39.3 0 0 1 7.176 7.301m-7.133 54.108l10.803 3.669l-3.701-10.897a39.3 39.3 0 0 1-7.102 7.228M19.082 73.76l-3.938 11.597l10.869-4.614a39.4 39.4 0 0 1-6.931-6.983m26.005 14.921L50.5 100l5.479-11.456c-1.95.3-3.946.456-5.979.456a39 39 0 0 1-4.913-.319"/><path id="SVGGW9ljcnp" fill="#F1C411" d="m33.104 7.324l-.438 7.739a38.6 38.6 0 0 1 6.484-2.522zM13.039 37.559a38.7 38.7 0 0 1 2.591-5.997l-7.634.477zM68.561 7.014l-6.457 5.911a39 39 0 0 1 7.018 3.088zm-60 61.121l6.852-.12a39 39 0 0 1-2.254-5.22zm25.291 24.879l5.885-5.388a38.7 38.7 0 0 1-6.365-2.346zm34.945-1.518l.428-7.568a39 39 0 0 1-5.994 2.768z"/><path id="SVGR0vFzNrd" fill="#fff" d="M95.584 49.709c.582-1.63.916-3.379.916-5.209C96.5 35.939 89.561 29 81 29c-6.523 0-12.096 4.034-14.382 9.74A12.95 12.95 0 0 0 57.5 35c-7.18 0-13 5.82-13 13c0 3.062 1.064 5.872 2.838 8.094c-3.865.564-6.838 3.884-6.838 7.906a8 8 0 0 0 8 8h38c7.18 0 13-5.82 13-13c0-3.643-1.502-6.931-3.916-9.291"/><circle id="SVGwjli4c1i" cx="50" cy="50" r="36"/></defs><clipPath id="SVGxEC66coR"><use href="#SVGwjli4c1i"/></clipPath><path fill="#DCC050" d="M47 41L2 86h84V41z" clip-path="url(#SVGxEC66coR)"/><use href="#SVGR0vFzNrd"/><use href="#SVGR0vFzNrd"/></svg>

Weather アイコンの使い方

React

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

<Icon icon="flat-ui:weather" width="24" />

Vue

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

<template>
  <Icon icon="flat-ui:weather" width="24" />
</template>

Svelte

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

<Icon icon="flat-ui:weather" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[flat-ui--weather]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/flat-ui -->
<div class="i-flat-ui:weather"></div>

Web コンポーネント

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

<iconify-icon icon="flat-ui:weather"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/flat-ui/weather.svg" alt="Weather アイコン" width="24" height="24">

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

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

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

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

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

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

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

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

Flat UI Icons をすべて見る →