Ruby アイコン

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

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

thesvg-color:ruby

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

アイコンセット: theSVG Color
作者: thesvg.org
ライセンス: MIT
サイズ: 256 × 255

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="255" viewBox="0 0 256 255"><defs><linearGradient id="SVGy7zbSctg" x1="84.8%" x2="58.3%" y1="111.4%" y2="64.6%"><stop offset="0%" stop-color="#fb7655"/><stop offset="0%" stop-color="#fb7655"/><stop offset="41%" stop-color="#e42b1e"/><stop offset="99%" stop-color="#900"/><stop offset="100%" stop-color="#900"/></linearGradient><linearGradient id="SVGQrDwacIm" x1="116.7%" x2="1.7%" y1="60.9%" y2="19.3%"><stop offset="0%" stop-color="#871101"/><stop offset="0%" stop-color="#871101"/><stop offset="99%" stop-color="#911209"/><stop offset="100%" stop-color="#911209"/></linearGradient><linearGradient id="SVGNaxLvbdZ" x1="75.8%" x2="39%" y1="219.3%" y2="7.8%"><stop offset="0%" stop-color="#871101"/><stop offset="0%" stop-color="#871101"/><stop offset="99%" stop-color="#911209"/><stop offset="100%" stop-color="#911209"/></linearGradient><linearGradient id="SVGyF0b4bGP" x1="50%" x2="66.5%" y1="7.2%" y2="79.1%"><stop offset="0%" stop-color="#fff"/><stop offset="0%" stop-color="#fff"/><stop offset="23%" stop-color="#e57252"/><stop offset="46%" stop-color="#de3b20"/><stop offset="99%" stop-color="#a60003"/><stop offset="100%" stop-color="#a60003"/></linearGradient><linearGradient id="SVG8qwutexJ" x1="46.2%" x2="49.9%" y1="16.3%" y2="83%"><stop offset="0%" stop-color="#fff"/><stop offset="0%" stop-color="#fff"/><stop offset="23%" stop-color="#e4714e"/><stop offset="56%" stop-color="#be1a0d"/><stop offset="99%" stop-color="#a80d00"/><stop offset="100%" stop-color="#a80d00"/></linearGradient><linearGradient id="SVGMnio5dQl" x1="37%" x2="49.5%" y1="15.6%" y2="92.5%"><stop offset="0%" stop-color="#fff"/><stop offset="0%" stop-color="#fff"/><stop offset="18%" stop-color="#e46342"/><stop offset="40%" stop-color="#c82410"/><stop offset="99%" stop-color="#a80d00"/><stop offset="100%" stop-color="#a80d00"/></linearGradient><linearGradient id="SVGhjQJ4dJc" x1="13.6%" x2="85.8%" y1="58.3%" y2="-46.7%"><stop offset="0%" stop-color="#fff"/><stop offset="0%" stop-color="#fff"/><stop offset="54%" stop-color="#c81f11"/><stop offset="99%" stop-color="#bf0905"/><stop offset="100%" stop-color="#bf0905"/></linearGradient><linearGradient id="SVGUNLVadpY" x1="27.6%" x2="50.7%" y1="21.1%" y2="79.1%"><stop offset="0%" stop-color="#fff"/><stop offset="0%" stop-color="#fff"/><stop offset="31%" stop-color="#de4024"/><stop offset="99%" stop-color="#bf190b"/><stop offset="100%" stop-color="#bf190b"/></linearGradient><linearGradient id="SVGtNXFqcbf" x1="-20.7%" x2="104.2%" y1="122.3%" y2="-6.3%"><stop offset="0%" stop-color="#bd0012"/><stop offset="0%" stop-color="#bd0012"/><stop offset="7%" stop-color="#fff"/><stop offset="17%" stop-color="#fff"/><stop offset="27%" stop-color="#c82f1c"/><stop offset="33%" stop-color="#820c01"/><stop offset="46%" stop-color="#a31601"/><stop offset="72%" stop-color="#b31301"/><stop offset="99%" stop-color="#e82609"/><stop offset="100%" stop-color="#e82609"/></linearGradient><linearGradient id="SVGtmYGwe9r" x1="58.8%" x2="12%" y1="65.2%" y2="50.1%"><stop offset="0%" stop-color="#8c0c01"/><stop offset="0%" stop-color="#8c0c01"/><stop offset="54%" stop-color="#990c00"/><stop offset="99%" stop-color="#a80d0e"/><stop offset="100%" stop-color="#a80d0e"/></linearGradient><linearGradient id="SVG8M7BKbcb" x1="79.3%" x2="23.1%" y1="62.8%" y2="17.9%"><stop offset="0%" stop-color="#7e110b"/><stop offset="0%" stop-color="#7e110b"/><stop offset="99%" stop-color="#9e0c00"/><stop offset="100%" stop-color="#9e0c00"/></linearGradient><linearGradient id="SVGZIa7nc3q" x1="92.9%" x2="59.8%" y1="74.1%" y2="39.7%"><stop offset="0%" stop-color="#79130d"/><stop offset="0%" stop-color="#79130d"/><stop offset="99%" stop-color="#9e120b"/><stop offset="100%" stop-color="#9e120b"/></linearGradient><linearGradient id="SVG04egfdOY" x1="56.6%" x2="3.1%" y1="101.7%" y2="12%"><stop offset="0%" stop-color="#8b2114"/><stop offset="0%" stop-color="#8b2114"/><stop offset="43%" stop-color="#9e100a"/><stop offset="99%" stop-color="#b3100c"/><stop offset="100%" stop-color="#b3100c"/></linearGradient><linearGradient id="SVGQgrjCquT" x1="30.9%" x2="92.5%" y1="35.6%" y2="100.7%"><stop offset="0%" stop-color="#b31000"/><stop offset="0%" stop-color="#b31000"/><stop offset="44%" stop-color="#910f08"/><stop offset="99%" stop-color="#791c12"/><stop offset="100%" stop-color="#791c12"/></linearGradient><radialGradient id="SVGEJrUnbvo" cx="32%" cy="40.2%" r="69.6%" fx="32%" fy="40.2%"><stop offset="0%" stop-color="#a80d00"/><stop offset="0%" stop-color="#a80d00"/><stop offset="99%" stop-color="#7e0e08"/><stop offset="100%" stop-color="#7e0e08"/></radialGradient><radialGradient id="SVGsNZgEdxI" cx="13.5%" cy="40.9%" r="88.4%" fx="13.5%" fy="40.9%"><stop offset="0%" stop-color="#a30c00"/><stop offset="0%" stop-color="#a30c00"/><stop offset="99%" stop-color="#800e08"/><stop offset="100%" stop-color="#800e08"/></radialGradient></defs><path fill="url(#SVGy7zbSctg)" d="M197.5 167.8L51.9 254.2l188.5-12.8l14.5-190z"/><path fill="url(#SVGQrDwacIm)" d="m240.7 241.3l-16.2-111.8l-44.1 58.2z"/><path fill="url(#SVGNaxLvbdZ)" d="m240.9 241.3l-118.7-9.4l-69.6 22z"/><path fill="url(#SVGyF0b4bGP)" d="m52.7 254l29.7-97.1l-65.2 13.9z"/><path fill="url(#SVG8qwutexJ)" d="M180.4 188L153 81.3l-78 73.2L180.3 188Z"/><path fill="url(#SVGMnio5dQl)" d="m248.7 82.7l-73.8-60.2l-20.5 66.4z"/><path fill="url(#SVGhjQJ4dJc)" d="m214.2 1l-43.4 24L143.4.7z"/><path fill="url(#SVGUNLVadpY)" d="m0 203.4l18.2-33.2l-14.7-39.5z"/><path fill="#fff" d="m2.5 129.5l14.8 42L81.6 157L155 88.8L175.7 23L143 0L87.6 20.8C70.1 37 36.3 69 35 69.8c-1.2.6-22.4 40.6-32.5 59.7"/><path fill="url(#SVGtNXFqcbf)" d="M54.4 54c37.9-37.4 86.7-59.6 105.4-40.7c18.8 18.9-1 64.8-39 102.3c-37.8 37.5-86 61-104.7 42c-18.8-18.8.5-66 38.3-103.5Z"/><path fill="url(#SVGtmYGwe9r)" d="m52.7 254l29.5-97.5l97.6 31.4c-35.3 33.1-74.6 61-127 66Z"/><path fill="url(#SVG8M7BKbcb)" d="m155 88.6l25.2 99.3c29.5-31 56-64.3 68.9-105.6l-94 6.3Z"/><path fill="url(#SVGZIa7nc3q)" d="M248.8 82.8c10-30.2 12.4-73.7-35-81.8l-38.7 21.5z"/><path fill="#9e1209" d="M0 203c1.4 50 37.4 50.7 52.8 51.1l-35.5-82.9z"/><path fill="url(#SVGEJrUnbvo)" d="m155.2 88.8l69.3 42.4c1.4.8 19.7-30.8 23.8-48.6l-93 6.2Z"/><path fill="url(#SVGsNZgEdxI)" d="m82.1 156.5l39.3 75.9c23.3-12.7 41.5-28 58.1-44.5z"/><path fill="url(#SVG04egfdOY)" d="m17.2 171.3l-5.6 66.4c10.5 14.3 25 15.6 40.1 14.5c-11-27.4-32.9-82-34.5-80.9"/><path fill="url(#SVGQgrjCquT)" d="m174.8 22.7l78.1 11C248.8 16 236 4.5 214.1 1z"/></svg>

Ruby アイコンの使い方

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

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

HTML 画像

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

theSVG Color の関連アイコン

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

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

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

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

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

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

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

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

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