rainbow logo
rainbow from Web3 Icons by 0xa3k5 · Mono · MIT Free for personal and commercial use.
- Name
- rainbow
- Set
- Web3 Icons
- Style
- Mono
- Viewbox
- 24×24
- License
- MIT
The same logo in other sets
rainbowBootstrap IconsrainbowEmoji One (Colored)rainbowFont Awesome 6 SolidrainbowFont Awesome SolidrainbowFluent EmojirainbowFluent Emoji FlatrainbowFluent Emoji High ContrastrainbowFirefox OS EmojirainbowHuge IconsrainbowJam IconsrainbowLine AwesomerainbowLuciderainbow-fillMingCute IconrainbowMyna UI IconsrainbowNoto EmojirainbowOpenMojirainbowPhosphorrainbow-fillRemix IconrainbowStreamline EmojisrainbowTabler IconsrainbowTDesign IconsrainbowWeb3 Icons BrandedrainbowTwitter EmojirainbowUnicons
Use the rainbow logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.35 3A1.35 1.35 0 0 0 3 4.35v1.575c0 .186.151.338.337.338H4.35c7.394 0 13.388 5.993 13.388 13.387v1.013c0 .186.15.337.337.337h1.575A1.35 1.35 0 0 0 21 19.65C21 10.455 13.546 3 4.35 3"/><path fill="currentColor" d="M3 7.106c0-.186.151-.337.337-.337H4.35c7.114 0 12.881 5.767 12.881 12.881v1.013a.337.337 0 0 1-.337.337h-2.588a.34.34 0 0 1-.337-.337V19.65a9.62 9.62 0 0 0-9.619-9.619H3.338A.337.337 0 0 1 3 9.694z"/><path fill="currentColor" d="M3 10.875c0-.186.151-.338.337-.338H4.35a9.11 9.11 0 0 1 9.113 9.113v1.013a.337.337 0 0 1-.338.337H11.55a1.35 1.35 0 0 1-1.35-1.35a5.85 5.85 0 0 0-5.85-5.85A1.35 1.35 0 0 1 3 12.45z"/></svg>
React
import type { SVGProps } from "react";
export function TokenRainbow(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.35 3A1.35 1.35 0 0 0 3 4.35v1.575c0 .186.151.338.337.338H4.35c7.394 0 13.388 5.993 13.388 13.387v1.013c0 .186.15.337.337.337h1.575A1.35 1.35 0 0 0 21 19.65C21 10.455 13.546 3 4.35 3"/><path fill="currentColor" d="M3 7.106c0-.186.151-.337.337-.337H4.35c7.114 0 12.881 5.767 12.881 12.881v1.013a.337.337 0 0 1-.337.337h-2.588a.34.34 0 0 1-.337-.337V19.65a9.62 9.62 0 0 0-9.619-9.619H3.338A.337.337 0 0 1 3 9.694z"/><path fill="currentColor" d="M3 10.875c0-.186.151-.338.337-.338H4.35a9.11 9.11 0 0 1 9.113 9.113v1.013a.337.337 0 0 1-.338.337H11.55a1.35 1.35 0 0 1-1.35-1.35a5.85 5.85 0 0 0-5.85-5.85A1.35 1.35 0 0 1 3 12.45z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.35 3A1.35 1.35 0 0 0 3 4.35v1.575c0 .186.151.338.337.338H4.35c7.394 0 13.388 5.993 13.388 13.387v1.013c0 .186.15.337.337.337h1.575A1.35 1.35 0 0 0 21 19.65C21 10.455 13.546 3 4.35 3"/><path fill="currentColor" d="M3 7.106c0-.186.151-.337.337-.337H4.35c7.114 0 12.881 5.767 12.881 12.881v1.013a.337.337 0 0 1-.337.337h-2.588a.34.34 0 0 1-.337-.337V19.65a9.62 9.62 0 0 0-9.619-9.619H3.338A.337.337 0 0 1 3 9.694z"/><path fill="currentColor" d="M3 10.875c0-.186.151-.338.337-.338H4.35a9.11 9.11 0 0 1 9.113 9.113v1.013a.337.337 0 0 1-.338.337H11.55a1.35 1.35 0 0 1-1.35-1.35a5.85 5.85 0 0 0-5.85-5.85A1.35 1.35 0 0 1 3 12.45z"/></svg> </template>
CSS
.icon-rainbow {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.35%203A1.35%201.35%200%200%200%203%204.35v1.575c0%20.186.151.338.337.338H4.35c7.394%200%2013.388%205.993%2013.388%2013.387v1.013c0%20.186.15.337.337.337h1.575A1.35%201.35%200%200%200%2021%2019.65C21%2010.455%2013.546%203%204.35%203%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3%207.106c0-.186.151-.337.337-.337H4.35c7.114%200%2012.881%205.767%2012.881%2012.881v1.013a.337.337%200%200%201-.337.337h-2.588a.34.34%200%200%201-.337-.337V19.65a9.62%209.62%200%200%200-9.619-9.619H3.338A.337.337%200%200%201%203%209.694z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3%2010.875c0-.186.151-.338.337-.338H4.35a9.11%209.11%200%200%201%209.113%209.113v1.013a.337.337%200%200%201-.338.337H11.55a1.35%201.35%200%200%201-1.35-1.35a5.85%205.85%200%200%200-5.85-5.85A1.35%201.35%200%200%201%203%2012.45z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.35%203A1.35%201.35%200%200%200%203%204.35v1.575c0%20.186.151.338.337.338H4.35c7.394%200%2013.388%205.993%2013.388%2013.387v1.013c0%20.186.15.337.337.337h1.575A1.35%201.35%200%200%200%2021%2019.65C21%2010.455%2013.546%203%204.35%203%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3%207.106c0-.186.151-.337.337-.337H4.35c7.114%200%2012.881%205.767%2012.881%2012.881v1.013a.337.337%200%200%201-.337.337h-2.588a.34.34%200%200%201-.337-.337V19.65a9.62%209.62%200%200%200-9.619-9.619H3.338A.337.337%200%200%201%203%209.694z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3%2010.875c0-.186.151-.338.337-.338H4.35a9.11%209.11%200%200%201%209.113%209.113v1.013a.337.337%200%200%201-.338.337H11.55a1.35%201.35%200%200%201-1.35-1.35a5.85%205.85%200%200%200-5.85-5.85A1.35%201.35%200%200%201%203%2012.45z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/token/rainbow.svg?color=%231a73e8&size=48
