tulip-background from Web3 Icons Branded by 0xa3k5 · Background · MIT Free for personal and commercial use.

Name
tulip-background
Set
Web3 Icons Branded
Style
Background
Viewbox
24×24
License
MIT

1 other variant in Web3 Icons Branded

The same logo in other sets

Use the tulip logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><g clip-path="url(#SVGHcSWxdhd11)"><path fill="#000" d="M24 0H0v24h24z"/><path fill="url(#SVG0NHzUbvx)" d="M11.543 14.445v2.95C10.477 15.5 8.113 14.7 6.513 14.7C6.514 18.615 9.774 20 12 20c2.23 0 5.486-1.385 5.486-5.299c-1.6 0-3.964.8-5.029 2.693v-2.94a1 1 0 0 1-.914-.009" opacity=".45"/><path fill="url(#SVGqrrrB63B)" d="M12.7 4.35c2.734 3.548 1.723 7.466-.014 9.844a.847.847 0 0 1-1.385 0c-1.756-2.328-2.94-6.122-.01-9.843a.883.883 0 0 1 1.409 0" opacity=".45"/><path fill="url(#SVGrTUVge3v)" d="M8.178 5.255c4.055 1.655 5.042 5.587 4.663 8.549a.87.87 0 0 1-1.225.677c-2.638-1.111-5.46-3.79-4.686-8.545a.9.9 0 0 1 1.248-.686z" opacity=".45"/><path fill="url(#SVGNgjhIcTv)" d="M17.08 5.95c.685 4.494-2.049 7.37-4.687 8.531a.87.87 0 0 1-1.23-.667c-.416-2.93.361-6.849 4.673-8.554a.9.9 0 0 1 1.243.686z" opacity=".45"/></g><defs><linearGradient id="SVG0NHzUbvx" x1="6.994" x2="17.084" y1="21.577" y2="21.294" gradientUnits="userSpaceOnUse"><stop stop-color="#5784c2"/><stop offset="1" stop-color="#1be6b3"/></linearGradient><linearGradient id="SVGqrrrB63B" x1="12" x2="12" y1="3.537" y2="15.016" gradientUnits="userSpaceOnUse"><stop stop-color="#d141e9"/><stop offset=".5" stop-color="#5f7dc1"/><stop offset="1" stop-color="#2bd9b9"/></linearGradient><linearGradient id="SVGrTUVge3v" x1="7.144" x2="13.005" y1="4.898" y2="14.622" gradientUnits="userSpaceOnUse"><stop stop-color="#d141e9"/><stop offset=".5" stop-color="#5f7dc1"/><stop offset="1" stop-color="#2bd9b9"/></linearGradient><linearGradient id="SVGNgjhIcTv" x1="16.869" x2="11.008" y1="4.913" y2="14.637" gradientUnits="userSpaceOnUse"><stop stop-color="#d141e9"/><stop offset=".5" stop-color="#5f7dc1"/><stop offset="1" stop-color="#2bd9b9"/></linearGradient><clipPath id="SVGHcSWxdhd11"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>

React

import type { SVGProps } from "react";

export function TokenBrandedTulipBackground(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><g clipPath="url(#SVGHcSWxdhd11)"><path fill="#000" d="M24 0H0v24h24z"/><path fill="url(#SVG0NHzUbvx)" d="M11.543 14.445v2.95C10.477 15.5 8.113 14.7 6.513 14.7C6.514 18.615 9.774 20 12 20c2.23 0 5.486-1.385 5.486-5.299c-1.6 0-3.964.8-5.029 2.693v-2.94a1 1 0 0 1-.914-.009" opacity=".45"/><path fill="url(#SVGqrrrB63B)" d="M12.7 4.35c2.734 3.548 1.723 7.466-.014 9.844a.847.847 0 0 1-1.385 0c-1.756-2.328-2.94-6.122-.01-9.843a.883.883 0 0 1 1.409 0" opacity=".45"/><path fill="url(#SVGrTUVge3v)" d="M8.178 5.255c4.055 1.655 5.042 5.587 4.663 8.549a.87.87 0 0 1-1.225.677c-2.638-1.111-5.46-3.79-4.686-8.545a.9.9 0 0 1 1.248-.686z" opacity=".45"/><path fill="url(#SVGNgjhIcTv)" d="M17.08 5.95c.685 4.494-2.049 7.37-4.687 8.531a.87.87 0 0 1-1.23-.667c-.416-2.93.361-6.849 4.673-8.554a.9.9 0 0 1 1.243.686z" opacity=".45"/></g><defs><linearGradient id="SVG0NHzUbvx" x1="6.994" x2="17.084" y1="21.577" y2="21.294" gradientUnits="userSpaceOnUse"><stop stopColor="#5784c2"/><stop offset="1" stopColor="#1be6b3"/></linearGradient><linearGradient id="SVGqrrrB63B" x1="12" x2="12" y1="3.537" y2="15.016" gradientUnits="userSpaceOnUse"><stop stopColor="#d141e9"/><stop offset=".5" stopColor="#5f7dc1"/><stop offset="1" stopColor="#2bd9b9"/></linearGradient><linearGradient id="SVGrTUVge3v" x1="7.144" x2="13.005" y1="4.898" y2="14.622" gradientUnits="userSpaceOnUse"><stop stopColor="#d141e9"/><stop offset=".5" stopColor="#5f7dc1"/><stop offset="1" stopColor="#2bd9b9"/></linearGradient><linearGradient id="SVGNgjhIcTv" x1="16.869" x2="11.008" y1="4.913" y2="14.637" gradientUnits="userSpaceOnUse"><stop stopColor="#d141e9"/><stop offset=".5" stopColor="#5f7dc1"/><stop offset="1" stopColor="#2bd9b9"/></linearGradient><clipPath id="SVGHcSWxdhd11"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><g clip-path="url(#SVGHcSWxdhd11)"><path fill="#000" d="M24 0H0v24h24z"/><path fill="url(#SVG0NHzUbvx)" d="M11.543 14.445v2.95C10.477 15.5 8.113 14.7 6.513 14.7C6.514 18.615 9.774 20 12 20c2.23 0 5.486-1.385 5.486-5.299c-1.6 0-3.964.8-5.029 2.693v-2.94a1 1 0 0 1-.914-.009" opacity=".45"/><path fill="url(#SVGqrrrB63B)" d="M12.7 4.35c2.734 3.548 1.723 7.466-.014 9.844a.847.847 0 0 1-1.385 0c-1.756-2.328-2.94-6.122-.01-9.843a.883.883 0 0 1 1.409 0" opacity=".45"/><path fill="url(#SVGrTUVge3v)" d="M8.178 5.255c4.055 1.655 5.042 5.587 4.663 8.549a.87.87 0 0 1-1.225.677c-2.638-1.111-5.46-3.79-4.686-8.545a.9.9 0 0 1 1.248-.686z" opacity=".45"/><path fill="url(#SVGNgjhIcTv)" d="M17.08 5.95c.685 4.494-2.049 7.37-4.687 8.531a.87.87 0 0 1-1.23-.667c-.416-2.93.361-6.849 4.673-8.554a.9.9 0 0 1 1.243.686z" opacity=".45"/></g><defs><linearGradient id="SVG0NHzUbvx" x1="6.994" x2="17.084" y1="21.577" y2="21.294" gradientUnits="userSpaceOnUse"><stop stop-color="#5784c2"/><stop offset="1" stop-color="#1be6b3"/></linearGradient><linearGradient id="SVGqrrrB63B" x1="12" x2="12" y1="3.537" y2="15.016" gradientUnits="userSpaceOnUse"><stop stop-color="#d141e9"/><stop offset=".5" stop-color="#5f7dc1"/><stop offset="1" stop-color="#2bd9b9"/></linearGradient><linearGradient id="SVGrTUVge3v" x1="7.144" x2="13.005" y1="4.898" y2="14.622" gradientUnits="userSpaceOnUse"><stop stop-color="#d141e9"/><stop offset=".5" stop-color="#5f7dc1"/><stop offset="1" stop-color="#2bd9b9"/></linearGradient><linearGradient id="SVGNgjhIcTv" x1="16.869" x2="11.008" y1="4.913" y2="14.637" gradientUnits="userSpaceOnUse"><stop stop-color="#d141e9"/><stop offset=".5" stop-color="#5f7dc1"/><stop offset="1" stop-color="#2bd9b9"/></linearGradient><clipPath id="SVGHcSWxdhd11"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
</template>

CSS

.icon-tulip-background {
  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%3Cg%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23SVGHcSWxdhd11)%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG0NHzUbvx)%22%20d%3D%22M11.543%2014.445v2.95C10.477%2015.5%208.113%2014.7%206.513%2014.7C6.514%2018.615%209.774%2020%2012%2020c2.23%200%205.486-1.385%205.486-5.299c-1.6%200-3.964.8-5.029%202.693v-2.94a1%201%200%200%201-.914-.009%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGqrrrB63B)%22%20d%3D%22M12.7%204.35c2.734%203.548%201.723%207.466-.014%209.844a.847.847%200%200%201-1.385%200c-1.756-2.328-2.94-6.122-.01-9.843a.883.883%200%200%201%201.409%200%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGrTUVge3v)%22%20d%3D%22M8.178%205.255c4.055%201.655%205.042%205.587%204.663%208.549a.87.87%200%200%201-1.225.677c-2.638-1.111-5.46-3.79-4.686-8.545a.9.9%200%200%201%201.248-.686z%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGNgjhIcTv)%22%20d%3D%22M17.08%205.95c.685%204.494-2.049%207.37-4.687%208.531a.87.87%200%200%201-1.23-.667c-.416-2.93.361-6.849%204.673-8.554a.9.9%200%200%201%201.243.686z%22%20opacity%3D%22.45%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG0NHzUbvx%22%20x1%3D%226.994%22%20x2%3D%2217.084%22%20y1%3D%2221.577%22%20y2%3D%2221.294%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%235784c2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231be6b3%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGqrrrB63B%22%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%223.537%22%20y2%3D%2215.016%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23d141e9%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%235f7dc1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232bd9b9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGrTUVge3v%22%20x1%3D%227.144%22%20x2%3D%2213.005%22%20y1%3D%224.898%22%20y2%3D%2214.622%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23d141e9%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%235f7dc1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232bd9b9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGNgjhIcTv%22%20x1%3D%2216.869%22%20x2%3D%2211.008%22%20y1%3D%224.913%22%20y2%3D%2214.637%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23d141e9%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%235f7dc1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232bd9b9%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd11%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23SVGHcSWxdhd11)%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG0NHzUbvx)%22%20d%3D%22M11.543%2014.445v2.95C10.477%2015.5%208.113%2014.7%206.513%2014.7C6.514%2018.615%209.774%2020%2012%2020c2.23%200%205.486-1.385%205.486-5.299c-1.6%200-3.964.8-5.029%202.693v-2.94a1%201%200%200%201-.914-.009%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGqrrrB63B)%22%20d%3D%22M12.7%204.35c2.734%203.548%201.723%207.466-.014%209.844a.847.847%200%200%201-1.385%200c-1.756-2.328-2.94-6.122-.01-9.843a.883.883%200%200%201%201.409%200%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGrTUVge3v)%22%20d%3D%22M8.178%205.255c4.055%201.655%205.042%205.587%204.663%208.549a.87.87%200%200%201-1.225.677c-2.638-1.111-5.46-3.79-4.686-8.545a.9.9%200%200%201%201.248-.686z%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGNgjhIcTv)%22%20d%3D%22M17.08%205.95c.685%204.494-2.049%207.37-4.687%208.531a.87.87%200%200%201-1.23-.667c-.416-2.93.361-6.849%204.673-8.554a.9.9%200%200%201%201.243.686z%22%20opacity%3D%22.45%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG0NHzUbvx%22%20x1%3D%226.994%22%20x2%3D%2217.084%22%20y1%3D%2221.577%22%20y2%3D%2221.294%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%235784c2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231be6b3%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGqrrrB63B%22%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%223.537%22%20y2%3D%2215.016%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23d141e9%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%235f7dc1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232bd9b9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGrTUVge3v%22%20x1%3D%227.144%22%20x2%3D%2213.005%22%20y1%3D%224.898%22%20y2%3D%2214.622%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23d141e9%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%235f7dc1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232bd9b9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGNgjhIcTv%22%20x1%3D%2216.869%22%20x2%3D%2211.008%22%20y1%3D%224.913%22%20y2%3D%2214.637%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23d141e9%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%235f7dc1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232bd9b9%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd11%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/token-branded/tulip-background.svg?color=%231a73e8&size=48