Flutter アイコン

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

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

logos:flutter

Flutter アイコン(logos:flutter)は、SVG Logos セットの無料 SVG アイコンです（作者: Gil Barbara）。 512 × 145 のグリッドで描かれています。 SVG Logos icons は CC0 ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: SVG Logos
作者: Gil Barbara
ライセンス: CC0-1.0
サイズ: 512 × 145

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="145" viewBox="0 0 512 145"><defs><radialGradient id="SVGXxQ1kd1i" cx="2.814%" cy="6.818%" r="151.475%" fx="2.814%" fy="6.818%" gradientTransform="matrix(1 0 0 .8077 0 .013)"><stop offset="0%" stop-color="#fff" stop-opacity=".1"/><stop offset="100%" stop-color="#fff" stop-opacity="0"/></radialGradient><linearGradient id="SVGL0EyQbrD" x1="19.657%" x2="69.874%" y1="81.493%" y2="47.643%"><stop offset="0%" stop-color="#1a237e" stop-opacity=".4"/><stop offset="100%" stop-color="#1a237e" stop-opacity="0"/></linearGradient></defs><path fill="#4a4a4a" d="M176.181 30.364h48.769v9.55h-38.849v28.834h35.047v9.457h-35.047v36.53h-9.92zm60.543 0h10.014v84.279h-10.014zm30.134 79.829c-3.801-4.265-5.749-10.199-5.749-17.801V54.564h10.014v36.252c0 5.748 1.298 9.92 3.894 12.61c2.596 2.688 6.119 3.986 10.477 3.986c3.337 0 6.397-.928 8.993-2.689s4.636-4.172 6.12-7.046s2.132-5.934 2.132-9.18V54.565h10.106v60.08h-9.55v-8.716h-.463c-1.67 2.967-4.266 5.47-7.881 7.51s-7.418 3.06-11.497 3.06c-7.325.093-12.795-2.04-16.596-6.305m77.694 5.19c-2.037-.834-3.801-1.854-5.282-3.245c-1.578-1.483-2.783-3.245-3.525-5.284c-.742-2.04-1.205-4.451-1.205-7.325V63.649h-10.477v-9.086h10.477V37.596h10.012v16.967h14.65v9.086h-14.557v33.47c0 3.338.649 5.841 1.854 7.418c1.484 1.761 3.618 2.688 6.49 2.688c2.32 0 4.453-.649 6.583-2.04v9.736c-1.205.556-2.41.927-3.614 1.205c-1.205.278-2.783.37-4.637.37c-2.41.094-4.729-.37-6.77-1.112m42.466 0c-2.04-.834-3.8-1.854-5.285-3.245c-1.578-1.483-2.783-3.245-3.525-5.284c-.739-2.04-1.205-4.451-1.205-7.325V63.649h-10.384v-9.086h10.478V37.596h10.014v16.967h14.555v9.086H387.11v33.47c0 3.338.65 5.841 1.854 7.418c1.485 1.761 3.615 2.688 6.49 2.688c2.317 0 4.45-.649 6.584-2.04v9.736c-1.205.556-2.413.927-3.618 1.205s-2.78.37-4.637.37c-2.41.094-4.633-.37-6.766-1.112m35.513-2.966c-4.543-2.781-8.068-6.49-10.664-11.404c-2.596-4.82-3.801-10.29-3.801-16.317c0-5.841 1.205-11.126 3.614-16.04c2.413-4.822 5.752-8.716 10.202-11.682c4.356-2.875 9.455-4.358 15.296-4.358s11.034 1.298 15.3 3.986c4.357 2.596 7.602 6.305 9.919 10.848c2.32 4.636 3.431 9.92 3.431 15.855c0 1.205-.093 2.225-.37 3.06h-47.47c.276 4.543 1.298 8.437 3.338 11.496c1.947 3.152 4.45 5.47 7.508 7.047c3.059 1.576 6.21 2.317 9.456 2.317q11.545 0 17.803-10.847l8.437 4.08c-2.596 4.82-6.12 8.714-10.57 11.496s-9.829 4.265-16.04 4.265c-5.654.37-10.846-1.02-15.39-3.802M455.256 78.3a19.1 19.1 0 0 0-2.13-7.51c-1.298-2.503-3.245-4.636-5.934-6.397s-6.12-2.596-10.201-2.596c-4.726 0-8.713 1.483-11.959 4.543q-4.868 4.59-6.396 11.96zm22.254-23.644h9.548V64.3h.463c1.204-3.338 3.431-6.027 6.863-8.252q5.007-3.338 10.567-3.338c2.782 0 5.102.464 7.049 1.298v10.755c-2.506-1.298-5.378-1.854-8.437-1.854c-2.876 0-5.565.835-7.975 2.503q-3.615 2.504-5.84 6.676c-1.485 2.782-2.134 5.841-2.134 8.993v33.656h-10.012v-60.08z"/><path fill="#54c5f8" d="M116.699 66.69H72.242l-38.894 38.904l22.224 22.224zM22.233 94.477L0 72.244L72.244 0h44.458z"/><path fill="#01579b" d="m55.574 127.818l16.67 16.671h44.457l-38.903-38.895z"/><path fill="url(#SVGL0EyQbrD)" d="m55.574 127.818l32.969-11.413l-10.745-10.811z"/><path fill="#29b6f6" d="m55.571 83.358l-22.225 22.225l22.225 22.225l22.224-22.225z"/><path fill="url(#SVGXxQ1kd1i)" d="m116.702 66.69l-38.895 38.895l38.895 38.904H72.244l-16.67-16.67l-22.233-22.234L72.244 66.69zM72.244 0L0 72.244l22.233 22.233L116.702 0z"/></svg>

Flutter アイコンの使い方

React

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

<Icon icon="logos:flutter" width="24" />

Vue

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

<template>
  <Icon icon="logos:flutter" width="24" />
</template>

Svelte

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

<Icon icon="logos:flutter" width="24" />

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

<iconify-icon icon="logos:flutter"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/logos/flutter.svg" alt="Flutter アイコン" width="24" height="24">

SVG Logos の関連アイコン

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

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

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

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

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

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

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

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

SVG Logos アイコンをすべて見る →