ICONYZ
日本語
theSVG Color の Mastodon アイコン

Mastodon アイコン

thesvg-color:mastodon

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

アイコンセット
theSVG Color
作者
thesvg.org
ライセンス
MIT
サイズ
61 × 65
SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="61" height="65" viewBox="0 0 61 65"><g fill="none"><path fill="url(#SVG2wvHBcLd)" d="M60.754 14.39C59.814 7.406 53.727 1.903 46.512.836C45.294.656 40.682 0 29.997 0h-.08C19.23 0 16.938.656 15.72.836C8.705 1.873 2.299 6.82.745 13.886c-.748 3.48-.828 7.338-.689 10.877c.198 5.075.237 10.142.697 15.197a71.5 71.5 0 0 0 1.664 9.968c1.477 6.056 7.458 11.096 13.317 13.152a35.7 35.7 0 0 0 19.484 1.028a28 28 0 0 0 2.107-.576c1.572-.5 3.413-1.057 4.766-2.038a.15.15 0 0 0 .062-.118v-4.899a.15.15 0 0 0-.055-.111a.14.14 0 0 0-.122-.028a54 54 0 0 1-12.644 1.478c-7.328 0-9.298-3.478-9.863-4.925a15.3 15.3 0 0 1-.857-3.882a.142.142 0 0 1 .178-.145a53 53 0 0 0 12.437 1.477c1.007 0 2.012 0 3.02-.026c4.213-.119 8.654-.334 12.8-1.144c.103-.02.206-.038.295-.065c6.539-1.255 12.762-5.196 13.394-15.176c.024-.393.083-4.115.083-4.523c.003-1.386.446-9.829-.065-15.017"/><path fill="#fff" d="M50.394 22.237v17.35H43.52V22.749c0-3.545-1.478-5.353-4.483-5.353c-3.303 0-4.958 2.139-4.958 6.364v9.217h-6.835V23.76c0-4.225-1.657-6.364-4.96-6.364c-2.988 0-4.48 1.808-4.48 5.353v16.84H10.93V22.237q0-5.318 2.715-8.45c1.868-2.082 4.317-3.152 7.358-3.152c3.519 0 6.178 1.354 7.951 4.057l1.711 2.871l1.714-2.871c1.773-2.704 4.432-4.056 7.945-4.056c3.038 0 5.487 1.069 7.36 3.152q2.714 3.128 2.71 8.449"/><defs><linearGradient id="SVG2wvHBcLd" x1="30.5" x2="30.5" y1="0" y2="65" gradientUnits="userSpaceOnUse"><stop stop-color="#6364ff"/><stop offset="1" stop-color="#563acc"/></linearGradient></defs></g></svg>

Mastodon アイコンの使い方

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

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

HTML 画像

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

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

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

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

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

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

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

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

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

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