fio logo
fio-background from Web3 Icons Branded by 0xa3k5 · Background · MIT Free for personal and commercial use.
- Name
- fio-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 fio 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(#SVGHcSWxdhd268)"><path fill="#005cb9" d="M24 0H0v24h24z"/><path fill="#fff" d="M12.377 14.286v5.37c0 .284-.18.42-.4.3L9.02 18.372a.92.92 0 0 1-.402-.738v-5.247a1 1 0 0 0 .14.094zM8.954 11.8l6.097-3.125a.72.72 0 0 0 .334-.592v-3.8c0-.235-.15-.343-.334-.25L9.432 6.916c-.579.311-.848.457-.815 1.114v3.522c0 .224.153.344.337.25"/><path fill="#fff" d="m8.954 7.452l6.097 3.126c.204.13.33.352.334.593v3.798c0 .236-.15.346-.334.252l-6.097-3.126a.72.72 0 0 1-.337-.594V7.703c0-.232.153-.346.337-.251"/><path fill="#fff" d="m8.954 11.802l4.24-2.174l-4.24-2.174a.21.21 0 0 0-.236 0a.84.84 0 0 0-.1.367v3.683a.7.7 0 0 0 .049.235a.2.2 0 0 0 .274.072z"/></g><defs><clipPath id="SVGHcSWxdhd268"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
React
import type { SVGProps } from "react";
export function TokenBrandedFioBackground(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(#SVGHcSWxdhd268)"><path fill="#005cb9" d="M24 0H0v24h24z"/><path fill="#fff" d="M12.377 14.286v5.37c0 .284-.18.42-.4.3L9.02 18.372a.92.92 0 0 1-.402-.738v-5.247a1 1 0 0 0 .14.094zM8.954 11.8l6.097-3.125a.72.72 0 0 0 .334-.592v-3.8c0-.235-.15-.343-.334-.25L9.432 6.916c-.579.311-.848.457-.815 1.114v3.522c0 .224.153.344.337.25"/><path fill="#fff" d="m8.954 7.452l6.097 3.126c.204.13.33.352.334.593v3.798c0 .236-.15.346-.334.252l-6.097-3.126a.72.72 0 0 1-.337-.594V7.703c0-.232.153-.346.337-.251"/><path fill="#fff" d="m8.954 11.802l4.24-2.174l-4.24-2.174a.21.21 0 0 0-.236 0a.84.84 0 0 0-.1.367v3.683a.7.7 0 0 0 .049.235a.2.2 0 0 0 .274.072z"/></g><defs><clipPath id="SVGHcSWxdhd268"><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(#SVGHcSWxdhd268)"><path fill="#005cb9" d="M24 0H0v24h24z"/><path fill="#fff" d="M12.377 14.286v5.37c0 .284-.18.42-.4.3L9.02 18.372a.92.92 0 0 1-.402-.738v-5.247a1 1 0 0 0 .14.094zM8.954 11.8l6.097-3.125a.72.72 0 0 0 .334-.592v-3.8c0-.235-.15-.343-.334-.25L9.432 6.916c-.579.311-.848.457-.815 1.114v3.522c0 .224.153.344.337.25"/><path fill="#fff" d="m8.954 7.452l6.097 3.126c.204.13.33.352.334.593v3.798c0 .236-.15.346-.334.252l-6.097-3.126a.72.72 0 0 1-.337-.594V7.703c0-.232.153-.346.337-.251"/><path fill="#fff" d="m8.954 11.802l4.24-2.174l-4.24-2.174a.21.21 0 0 0-.236 0a.84.84 0 0 0-.1.367v3.683a.7.7 0 0 0 .049.235a.2.2 0 0 0 .274.072z"/></g><defs><clipPath id="SVGHcSWxdhd268"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg> </template>
CSS
.icon-fio-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(%23SVGHcSWxdhd268)%22%3E%3Cpath%20fill%3D%22%23005cb9%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12.377%2014.286v5.37c0%20.284-.18.42-.4.3L9.02%2018.372a.92.92%200%200%201-.402-.738v-5.247a1%201%200%200%200%20.14.094zM8.954%2011.8l6.097-3.125a.72.72%200%200%200%20.334-.592v-3.8c0-.235-.15-.343-.334-.25L9.432%206.916c-.579.311-.848.457-.815%201.114v3.522c0%20.224.153.344.337.25%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m8.954%207.452l6.097%203.126c.204.13.33.352.334.593v3.798c0%20.236-.15.346-.334.252l-6.097-3.126a.72.72%200%200%201-.337-.594V7.703c0-.232.153-.346.337-.251%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m8.954%2011.802l4.24-2.174l-4.24-2.174a.21.21%200%200%200-.236%200a.84.84%200%200%200-.1.367v3.683a.7.7%200%200%200%20.049.235a.2.2%200%200%200%20.274.072z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGHcSWxdhd268%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(%23SVGHcSWxdhd268)%22%3E%3Cpath%20fill%3D%22%23005cb9%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12.377%2014.286v5.37c0%20.284-.18.42-.4.3L9.02%2018.372a.92.92%200%200%201-.402-.738v-5.247a1%201%200%200%200%20.14.094zM8.954%2011.8l6.097-3.125a.72.72%200%200%200%20.334-.592v-3.8c0-.235-.15-.343-.334-.25L9.432%206.916c-.579.311-.848.457-.815%201.114v3.522c0%20.224.153.344.337.25%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m8.954%207.452l6.097%203.126c.204.13.33.352.334.593v3.798c0%20.236-.15.346-.334.252l-6.097-3.126a.72.72%200%200%201-.337-.594V7.703c0-.232.153-.346.337-.251%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m8.954%2011.802l4.24-2.174l-4.24-2.174a.21.21%200%200%200-.236%200a.84.84%200%200%200-.1.367v3.683a.7.7%200%200%200%20.049.235a.2.2%200%200%200%20.274.072z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGHcSWxdhd268%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/fio-background.svg?color=%231a73e8&size=48
