ion logo
ion-background from Web3 Icons Branded by 0xa3k5 · Background · MIT Free for personal and commercial use.
- Name
- ion-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 ion 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(#SVGHcSWxdhd204)"><path fill="#55b8e3" d="M24 0H0v24h24z"/><path fill="#fff" d="M6.201 14.188A1.972 1.972 0 0 1 4 12.225a1.97 1.97 0 0 1 1.951-1.977c.698-3.207 3.542-5.608 6.943-5.608c.634 0 1.25.084 1.836.24a1.962 1.962 0 0 1 3.03-.299c.37.37.576.873.574 1.396c.001.328-.08.652-.236.94A7.13 7.13 0 0 1 20 11.78a7.13 7.13 0 0 1-2.112 5.08c.246.338.378.745.377 1.163A1.973 1.973 0 0 1 16.297 20a1.97 1.97 0 0 1-1.832-1.254a7 7 0 0 1-1.57.175c-3.085 0-5.711-1.975-6.694-4.733m.357-.076c.945 2.595 3.425 4.447 6.336 4.447q.759-.002 1.47-.162a1.97 1.97 0 0 1 1.092-2.16a1.955 1.955 0 0 1 2.193.351a6.77 6.77 0 0 0 1.991-4.808c0-1.752-.662-3.35-1.749-4.552a1.96 1.96 0 0 1-2.278.575A1.97 1.97 0 0 1 14.4 5.977a2 2 0 0 1 .153-.768a6.7 6.7 0 0 0-1.66-.207c-3.211 0-5.9 2.255-6.58 5.276a1.976 1.976 0 0 1 1.623 1.947a1.98 1.98 0 0 1-1.378 1.887"/><path fill="#fff" d="M12.909 13.59a2 2 0 1 0 0-4a2 2 0 0 0 0 4"/></g><defs><clipPath id="SVGHcSWxdhd204"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
React
import type { SVGProps } from "react";
export function TokenBrandedIonBackground(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(#SVGHcSWxdhd204)"><path fill="#55b8e3" d="M24 0H0v24h24z"/><path fill="#fff" d="M6.201 14.188A1.972 1.972 0 0 1 4 12.225a1.97 1.97 0 0 1 1.951-1.977c.698-3.207 3.542-5.608 6.943-5.608c.634 0 1.25.084 1.836.24a1.962 1.962 0 0 1 3.03-.299c.37.37.576.873.574 1.396c.001.328-.08.652-.236.94A7.13 7.13 0 0 1 20 11.78a7.13 7.13 0 0 1-2.112 5.08c.246.338.378.745.377 1.163A1.973 1.973 0 0 1 16.297 20a1.97 1.97 0 0 1-1.832-1.254a7 7 0 0 1-1.57.175c-3.085 0-5.711-1.975-6.694-4.733m.357-.076c.945 2.595 3.425 4.447 6.336 4.447q.759-.002 1.47-.162a1.97 1.97 0 0 1 1.092-2.16a1.955 1.955 0 0 1 2.193.351a6.77 6.77 0 0 0 1.991-4.808c0-1.752-.662-3.35-1.749-4.552a1.96 1.96 0 0 1-2.278.575A1.97 1.97 0 0 1 14.4 5.977a2 2 0 0 1 .153-.768a6.7 6.7 0 0 0-1.66-.207c-3.211 0-5.9 2.255-6.58 5.276a1.976 1.976 0 0 1 1.623 1.947a1.98 1.98 0 0 1-1.378 1.887"/><path fill="#fff" d="M12.909 13.59a2 2 0 1 0 0-4a2 2 0 0 0 0 4"/></g><defs><clipPath id="SVGHcSWxdhd204"><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(#SVGHcSWxdhd204)"><path fill="#55b8e3" d="M24 0H0v24h24z"/><path fill="#fff" d="M6.201 14.188A1.972 1.972 0 0 1 4 12.225a1.97 1.97 0 0 1 1.951-1.977c.698-3.207 3.542-5.608 6.943-5.608c.634 0 1.25.084 1.836.24a1.962 1.962 0 0 1 3.03-.299c.37.37.576.873.574 1.396c.001.328-.08.652-.236.94A7.13 7.13 0 0 1 20 11.78a7.13 7.13 0 0 1-2.112 5.08c.246.338.378.745.377 1.163A1.973 1.973 0 0 1 16.297 20a1.97 1.97 0 0 1-1.832-1.254a7 7 0 0 1-1.57.175c-3.085 0-5.711-1.975-6.694-4.733m.357-.076c.945 2.595 3.425 4.447 6.336 4.447q.759-.002 1.47-.162a1.97 1.97 0 0 1 1.092-2.16a1.955 1.955 0 0 1 2.193.351a6.77 6.77 0 0 0 1.991-4.808c0-1.752-.662-3.35-1.749-4.552a1.96 1.96 0 0 1-2.278.575A1.97 1.97 0 0 1 14.4 5.977a2 2 0 0 1 .153-.768a6.7 6.7 0 0 0-1.66-.207c-3.211 0-5.9 2.255-6.58 5.276a1.976 1.976 0 0 1 1.623 1.947a1.98 1.98 0 0 1-1.378 1.887"/><path fill="#fff" d="M12.909 13.59a2 2 0 1 0 0-4a2 2 0 0 0 0 4"/></g><defs><clipPath id="SVGHcSWxdhd204"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg> </template>
CSS
.icon-ion-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(%23SVGHcSWxdhd204)%22%3E%3Cpath%20fill%3D%22%2355b8e3%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.201%2014.188A1.972%201.972%200%200%201%204%2012.225a1.97%201.97%200%200%201%201.951-1.977c.698-3.207%203.542-5.608%206.943-5.608c.634%200%201.25.084%201.836.24a1.962%201.962%200%200%201%203.03-.299c.37.37.576.873.574%201.396c.001.328-.08.652-.236.94A7.13%207.13%200%200%201%2020%2011.78a7.13%207.13%200%200%201-2.112%205.08c.246.338.378.745.377%201.163A1.973%201.973%200%200%201%2016.297%2020a1.97%201.97%200%200%201-1.832-1.254a7%207%200%200%201-1.57.175c-3.085%200-5.711-1.975-6.694-4.733m.357-.076c.945%202.595%203.425%204.447%206.336%204.447q.759-.002%201.47-.162a1.97%201.97%200%200%201%201.092-2.16a1.955%201.955%200%200%201%202.193.351a6.77%206.77%200%200%200%201.991-4.808c0-1.752-.662-3.35-1.749-4.552a1.96%201.96%200%200%201-2.278.575A1.97%201.97%200%200%201%2014.4%205.977a2%202%200%200%201%20.153-.768a6.7%206.7%200%200%200-1.66-.207c-3.211%200-5.9%202.255-6.58%205.276a1.976%201.976%200%200%201%201.623%201.947a1.98%201.98%200%200%201-1.378%201.887%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12.909%2013.59a2%202%200%201%200%200-4a2%202%200%200%200%200%204%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGHcSWxdhd204%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(%23SVGHcSWxdhd204)%22%3E%3Cpath%20fill%3D%22%2355b8e3%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.201%2014.188A1.972%201.972%200%200%201%204%2012.225a1.97%201.97%200%200%201%201.951-1.977c.698-3.207%203.542-5.608%206.943-5.608c.634%200%201.25.084%201.836.24a1.962%201.962%200%200%201%203.03-.299c.37.37.576.873.574%201.396c.001.328-.08.652-.236.94A7.13%207.13%200%200%201%2020%2011.78a7.13%207.13%200%200%201-2.112%205.08c.246.338.378.745.377%201.163A1.973%201.973%200%200%201%2016.297%2020a1.97%201.97%200%200%201-1.832-1.254a7%207%200%200%201-1.57.175c-3.085%200-5.711-1.975-6.694-4.733m.357-.076c.945%202.595%203.425%204.447%206.336%204.447q.759-.002%201.47-.162a1.97%201.97%200%200%201%201.092-2.16a1.955%201.955%200%200%201%202.193.351a6.77%206.77%200%200%200%201.991-4.808c0-1.752-.662-3.35-1.749-4.552a1.96%201.96%200%200%201-2.278.575A1.97%201.97%200%200%201%2014.4%205.977a2%202%200%200%201%20.153-.768a6.7%206.7%200%200%200-1.66-.207c-3.211%200-5.9%202.255-6.58%205.276a1.976%201.976%200%200%201%201.623%201.947a1.98%201.98%200%200%201-1.378%201.887%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12.909%2013.59a2%202%200%201%200%200-4a2%202%200%200%200%200%204%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGHcSWxdhd204%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/ion-background.svg?color=%231a73e8&size=48
