Ruby icon
skill-icons:ruby
The Ruby icon (skill-icons:ruby) is a free SVG icon from the Skill Icons set by tandpfun. It is drawn on a 256 × 256 grid. Skill Icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Skill Icons
- Author
- tandpfun
- License
- MIT
- Size
- 256 × 256
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#e43717" rx="60"/><g fill-rule="evenodd" clip-path="url(#SVGanFeIbkr)" clip-rule="evenodd"><path fill="url(#SVGysfDGcIy)" d="M177.454 156.477L74.685 217.5l133.066-9.029L218 74.294z"/><path fill="url(#SVGmWXJBbOA)" d="m207.969 208.379l-11.437-78.939l-31.153 41.137z"/><path fill="url(#SVGk887rbsV)" d="m208.124 208.379l-83.79-6.577l-49.204 15.527z"/><path fill="url(#SVGJEZweXBC)" d="m75.248 217.346l20.932-68.573l-46.06 9.849z"/><path fill="url(#SVGW7xXpc0k)" d="m165.371 170.804l-19.26-75.442l-55.119 51.666z"/><path fill="url(#SVGlq2nEeuk)" d="m213.63 96.425l-52.102-42.554l-14.509 46.906z"/><path fill="url(#SVG5evk4cLJ)" d="m189.264 38.7l-30.643 16.934l-19.333-17.162z"/><path fill="url(#SVGkIFOzbgb)" d="m38 181.624l12.837-23.412l-10.384-27.891z"/><path fill="#fff" d="m39.763 129.44l10.447 29.635l45.398-10.185l51.829-48.168l14.627-46.46L139.033 38L99.877 52.654C87.54 64.128 63.6 86.832 62.738 87.259c-.854.436-15.807 28.699-22.975 42.181"/><path fill="url(#SVGYD4Oh66t)" d="M76.448 76.202c26.736-26.51 61.205-42.172 74.432-28.826c13.22 13.346-.799 45.779-27.536 72.279c-26.737 26.501-60.778 43.027-73.997 29.681c-13.228-13.337.364-46.633 27.1-73.134"/><path fill="url(#SVGjZrz7bTR)" d="m75.248 217.319l20.768-68.792l68.973 22.159c-24.938 23.384-52.674 43.153-89.74 46.633"/><path fill="url(#SVGPd9cNcHs)" d="m147.528 100.586l17.707 70.136c20.831-21.904 39.528-45.452 48.685-74.578z"/><path fill="url(#SVG1iQ4levs)" d="M213.739 96.498c7.086-21.386 8.722-52.066-24.694-57.762L161.627 53.88z"/><path fill="#9e1209" d="M38 181.315c.981 35.296 26.446 35.822 37.294 36.132L50.237 158.93z"/><path fill="url(#SVGXvSIIb5v)" d="M147.627 100.695c16.008 9.839 48.269 29.599 48.923 29.962c1.017.573 13.909-21.74 16.835-34.35z"/><path fill="url(#SVGEfMMYdSG)" d="m95.99 148.527l27.763 53.565c16.416-8.903 29.272-19.75 41.046-31.37z"/><path fill="url(#SVGLb8IfeSM)" d="m50.128 159.002l-3.933 46.842c7.422 10.139 17.633 11.02 28.345 10.23c-7.75-19.287-23.23-57.853-24.412-57.072"/><path fill="url(#SVGTNbH0cxp)" d="m161.464 53.999l55.155 7.74c-2.943-12.474-11.983-20.523-27.391-23.04z"/></g><defs><linearGradient id="SVGysfDGcIy" x1="196.145" x2="158.172" y1="233.825" y2="166.782" gradientUnits="userSpaceOnUse"><stop stop-color="#fb7655"/><stop offset=".41" stop-color="#e42b1e"/><stop offset=".99" stop-color="#900"/><stop offset="1" stop-color="#900"/></linearGradient><linearGradient id="SVGmWXJBbOA" x1="215.061" x2="166.123" y1="177.506" y2="144.666" gradientUnits="userSpaceOnUse"><stop stop-color="#871101"/><stop offset=".99" stop-color="#911209"/><stop offset="1" stop-color="#911209"/></linearGradient><linearGradient id="SVGk887rbsV" x1="175.905" x2="126.969" y1="235.857" y2="203.017" gradientUnits="userSpaceOnUse"><stop stop-color="#871101"/><stop offset=".99" stop-color="#911209"/><stop offset="1" stop-color="#911209"/></linearGradient><linearGradient id="SVGJEZweXBC" x1="73.155" x2="80.742" y1="153.734" y2="203.038" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset=".23" stop-color="#e57252"/><stop offset=".46" stop-color="#de3b20"/><stop offset=".99" stop-color="#a60003"/><stop offset="1" stop-color="#a60003"/></linearGradient><linearGradient id="SVGW7xXpc0k" x1="125.336" x2="128.131" y1="107.695" y2="158.014" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset=".23" stop-color="#e4714e"/><stop offset=".56" stop-color="#be1a0d"/><stop offset=".99" stop-color="#a80d00"/><stop offset="1" stop-color="#a80d00"/></linearGradient><linearGradient id="SVGlq2nEeuk" x1="171.642" x2="180.01" y1="61.186" y2="97.249" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset=".18" stop-color="#e46342"/><stop offset=".4" stop-color="#c82410"/><stop offset=".99" stop-color="#a80d00"/><stop offset="1" stop-color="#a80d00"/></linearGradient><linearGradient id="SVG5evk4cLJ" x1="146.089" x2="182.15" y1="48.485" y2="30.455" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset=".54" stop-color="#c81f11"/><stop offset=".99" stop-color="#bf0905"/><stop offset="1" stop-color="#bf0905"/></linearGradient><linearGradient id="SVGkIFOzbgb" x1="41.546" x2="44.514" y1="141.164" y2="170.879" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset=".31" stop-color="#de4024"/><stop offset=".99" stop-color="#bf190b"/><stop offset="1" stop-color="#bf190b"/></linearGradient><linearGradient id="SVGYD4Oh66t" x1="21.142" x2="160.661" y1="178.912" y2="35.448" gradientUnits="userSpaceOnUse"><stop stop-color="#bd0012"/><stop offset=".07" 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="1" stop-color="#e82609"/></linearGradient><linearGradient id="SVGjZrz7bTR" x1="128.009" x2="85.985" y1="193.383" y2="183.011" gradientUnits="userSpaceOnUse"><stop stop-color="#8c0c01"/><stop offset=".54" stop-color="#990c00"/><stop offset=".99" stop-color="#a80d0e"/><stop offset="1" stop-color="#a80d0e"/></linearGradient><linearGradient id="SVGPd9cNcHs" x1="200.19" x2="162.857" y1="142.944" y2="109.484" gradientUnits="userSpaceOnUse"><stop stop-color="#7e110b"/><stop offset=".99" stop-color="#9e0c00"/><stop offset="1" stop-color="#9e0c00"/></linearGradient><linearGradient id="SVG1iQ4levs" x1="213.906" x2="195.31" y1="81.55" y2="61.67" gradientUnits="userSpaceOnUse"><stop stop-color="#79130d"/><stop offset=".99" stop-color="#9e120b"/><stop offset="1" stop-color="#9e120b"/></linearGradient><linearGradient id="SVGLb8IfeSM" x1="62.229" x2="47.075" y1="217.279" y2="165.863" gradientUnits="userSpaceOnUse"><stop stop-color="#8b2114"/><stop offset=".43" stop-color="#9e100a"/><stop offset=".99" stop-color="#b3100c"/><stop offset="1" stop-color="#b3100c"/></linearGradient><linearGradient id="SVGTNbH0cxp" x1="178.491" x2="212.466" y1="46.901" y2="61.899" gradientUnits="userSpaceOnUse"><stop stop-color="#b31000"/><stop offset=".44" stop-color="#910f08"/><stop offset=".99" stop-color="#791c12"/><stop offset="1" stop-color="#791c12"/></linearGradient><radialGradient id="SVGXvSIIb5v" cx="0" cy="0" r="1" gradientTransform="translate(168.67 110.124)scale(45.7496)" gradientUnits="userSpaceOnUse"><stop stop-color="#a80d00"/><stop offset=".99" stop-color="#7e0e08"/><stop offset="1" stop-color="#7e0e08"/></radialGradient><radialGradient id="SVGEfMMYdSG" cx="0" cy="0" r="1" gradientTransform="translate(105.313 170.414)scale(60.818)" gradientUnits="userSpaceOnUse"><stop stop-color="#a30c00"/><stop offset=".99" stop-color="#800e08"/><stop offset="1" stop-color="#800e08"/></radialGradient><clipPath id="SVGanFeIbkr"><path fill="#fff" d="M38 38h180v179.5H38z"/></clipPath></defs></g></svg>How to use the Ruby icon
React
import { Icon } from "@iconify/react";
<Icon icon="skill-icons:ruby" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="skill-icons:ruby" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="skill-icons:ruby" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[skill-icons--ruby]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/skill-icons -->
<div class="i-skill-icons:ruby"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="skill-icons:ruby"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/skill-icons/ruby.svg" alt="Ruby icon" width="24" height="24">Ruby icon in other icon sets
Ruby icon FAQ
Is the Ruby icon free for commercial use?
Yes. Skill Icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Ruby icon in React?
Install @iconify/react and render <Icon icon="skill-icons:ruby" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Ruby icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/skill-icons/ruby.svg" alt="Ruby icon">, or paste the SVG code inline to style it with CSS.