cos logo
cos-background from Web3 Icons Branded by 0xa3k5 · Background · MIT Free for personal and commercial use.
- Name
- cos-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 cos 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(#SVGHcSWxdhd154)"><path fill="url(#SVGucLjpMKr)" d="M24 0H0v24h24z"/><path fill="#fff" d="M12.927 4c3.185 0 5.39 1.945 6.15 2.99c-.615.855-2.29 1.155-3.605.455a5.5 5.5 0 0 0-2.545-.67c-2.78 0-4.37 2.115-4.82 3.225h-2.9c1.115-3.6 4.045-6 7.72-6m.021 16c3.185 0 5.39-1.945 6.15-2.99c-.615-.86-2.295-1.155-3.61-.455a5.5 5.5 0 0 1-2.54.67c-2.78 0-4.37-2.115-4.82-3.225h-2.9c1.11 3.6 4.045 6 7.72 6"/><path fill="#fff" d="M8.192 17.12A4.43 4.43 0 0 1 5.202 14h2.915a5.34 5.34 0 0 0 4.785 3.225c-.75.2-2.72.49-4.71-.105m-.02-10.24A4.43 4.43 0 0 0 5.187 10h2.915c1.2-2.636 3.7-3.26 4.8-3.226c-.75-.2-2.735-.49-4.73.105M6.902 13.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/><path fill="#fff" d="M6.402 13.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/></g><defs><linearGradient id="SVGucLjpMKr" x1="13.601" x2="12.507" y1="4" y2="11.762" gradientUnits="userSpaceOnUse"><stop stop-color="#0dc4fa"/><stop offset="1" stop-color="#2797fd"/></linearGradient><clipPath id="SVGHcSWxdhd154"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
React
import type { SVGProps } from "react";
export function TokenBrandedCosBackground(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(#SVGHcSWxdhd154)"><path fill="url(#SVGucLjpMKr)" d="M24 0H0v24h24z"/><path fill="#fff" d="M12.927 4c3.185 0 5.39 1.945 6.15 2.99c-.615.855-2.29 1.155-3.605.455a5.5 5.5 0 0 0-2.545-.67c-2.78 0-4.37 2.115-4.82 3.225h-2.9c1.115-3.6 4.045-6 7.72-6m.021 16c3.185 0 5.39-1.945 6.15-2.99c-.615-.86-2.295-1.155-3.61-.455a5.5 5.5 0 0 1-2.54.67c-2.78 0-4.37-2.115-4.82-3.225h-2.9c1.11 3.6 4.045 6 7.72 6"/><path fill="#fff" d="M8.192 17.12A4.43 4.43 0 0 1 5.202 14h2.915a5.34 5.34 0 0 0 4.785 3.225c-.75.2-2.72.49-4.71-.105m-.02-10.24A4.43 4.43 0 0 0 5.187 10h2.915c1.2-2.636 3.7-3.26 4.8-3.226c-.75-.2-2.735-.49-4.73.105M6.902 13.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/><path fill="#fff" d="M6.402 13.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/></g><defs><linearGradient id="SVGucLjpMKr" x1="13.601" x2="12.507" y1="4" y2="11.762" gradientUnits="userSpaceOnUse"><stop stopColor="#0dc4fa"/><stop offset="1" stopColor="#2797fd"/></linearGradient><clipPath id="SVGHcSWxdhd154"><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(#SVGHcSWxdhd154)"><path fill="url(#SVGucLjpMKr)" d="M24 0H0v24h24z"/><path fill="#fff" d="M12.927 4c3.185 0 5.39 1.945 6.15 2.99c-.615.855-2.29 1.155-3.605.455a5.5 5.5 0 0 0-2.545-.67c-2.78 0-4.37 2.115-4.82 3.225h-2.9c1.115-3.6 4.045-6 7.72-6m.021 16c3.185 0 5.39-1.945 6.15-2.99c-.615-.86-2.295-1.155-3.61-.455a5.5 5.5 0 0 1-2.54.67c-2.78 0-4.37-2.115-4.82-3.225h-2.9c1.11 3.6 4.045 6 7.72 6"/><path fill="#fff" d="M8.192 17.12A4.43 4.43 0 0 1 5.202 14h2.915a5.34 5.34 0 0 0 4.785 3.225c-.75.2-2.72.49-4.71-.105m-.02-10.24A4.43 4.43 0 0 0 5.187 10h2.915c1.2-2.636 3.7-3.26 4.8-3.226c-.75-.2-2.735-.49-4.73.105M6.902 13.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/><path fill="#fff" d="M6.402 13.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/></g><defs><linearGradient id="SVGucLjpMKr" x1="13.601" x2="12.507" y1="4" y2="11.762" gradientUnits="userSpaceOnUse"><stop stop-color="#0dc4fa"/><stop offset="1" stop-color="#2797fd"/></linearGradient><clipPath id="SVGHcSWxdhd154"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg> </template>
CSS
.icon-cos-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(%23SVGHcSWxdhd154)%22%3E%3Cpath%20fill%3D%22url(%23SVGucLjpMKr)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12.927%204c3.185%200%205.39%201.945%206.15%202.99c-.615.855-2.29%201.155-3.605.455a5.5%205.5%200%200%200-2.545-.67c-2.78%200-4.37%202.115-4.82%203.225h-2.9c1.115-3.6%204.045-6%207.72-6m.021%2016c3.185%200%205.39-1.945%206.15-2.99c-.615-.86-2.295-1.155-3.61-.455a5.5%205.5%200%200%201-2.54.67c-2.78%200-4.37-2.115-4.82-3.225h-2.9c1.11%203.6%204.045%206%207.72%206%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M8.192%2017.12A4.43%204.43%200%200%201%205.202%2014h2.915a5.34%205.34%200%200%200%204.785%203.225c-.75.2-2.72.49-4.71-.105m-.02-10.24A4.43%204.43%200%200%200%205.187%2010h2.915c1.2-2.636%203.7-3.26%204.8-3.226c-.75-.2-2.735-.49-4.73.105M6.902%2013.5a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.402%2013.5a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGucLjpMKr%22%20x1%3D%2213.601%22%20x2%3D%2212.507%22%20y1%3D%224%22%20y2%3D%2211.762%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230dc4fa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232797fd%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd154%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(%23SVGHcSWxdhd154)%22%3E%3Cpath%20fill%3D%22url(%23SVGucLjpMKr)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12.927%204c3.185%200%205.39%201.945%206.15%202.99c-.615.855-2.29%201.155-3.605.455a5.5%205.5%200%200%200-2.545-.67c-2.78%200-4.37%202.115-4.82%203.225h-2.9c1.115-3.6%204.045-6%207.72-6m.021%2016c3.185%200%205.39-1.945%206.15-2.99c-.615-.86-2.295-1.155-3.61-.455a5.5%205.5%200%200%201-2.54.67c-2.78%200-4.37-2.115-4.82-3.225h-2.9c1.11%203.6%204.045%206%207.72%206%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M8.192%2017.12A4.43%204.43%200%200%201%205.202%2014h2.915a5.34%205.34%200%200%200%204.785%203.225c-.75.2-2.72.49-4.71-.105m-.02-10.24A4.43%204.43%200%200%200%205.187%2010h2.915c1.2-2.636%203.7-3.26%204.8-3.226c-.75-.2-2.735-.49-4.73.105M6.902%2013.5a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.402%2013.5a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGucLjpMKr%22%20x1%3D%2213.601%22%20x2%3D%2212.507%22%20y1%3D%224%22%20y2%3D%2211.762%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230dc4fa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232797fd%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd154%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/cos-background.svg?color=%231a73e8&size=48
