sfd logo
sfd-background from Web3 Icons Branded by 0xa3k5 · Background · MIT Free for personal and commercial use.
- Name
- sfd-background
- Set
- Web3 Icons Branded
- Style
- Background
- Viewbox
- 24×24
- License
- MIT
1 other variant in Web3 Icons Branded
Use the sfd 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(#SVGHcSWxdhd127)"><path fill="#fff" d="M24 0H0v24h24z"/><path fill="url(#SVGWL4Wednd)" d="m11.579 4l-1.023 1.41v.472c-1.347.38-3.929 1.727-5.053 2.354c0 1.318.48 4.627.724 6.118l-.244.236l-.72 1.642l2.164-1.406c-.576-1.508-.56-4.708-.48-6.119c1.154-.943 3.588-1.65 4.632-1.882z"/><path fill="url(#SVGQsql3GJA)" d="m12.42 4l1.024 1.41v.472c1.347.38 3.928 1.727 5.053 2.354c0 1.318-.48 4.627-.724 6.118l.244.236l.72 1.642l-2.164-1.406c.576-1.508.56-4.708.48-6.119c-1.154-.943-3.588-1.65-4.632-1.882z"/><path fill="url(#SVGytPedcCF)" d="m7.911 15.528l-2.408 1.415l1.924.232l.24-.232c.964 1.5 3.289 2.665 4.333 3.057c2.312-.943 3.848-2.43 4.333-3.057l.24.232l1.924-.232l-2.409-1.415c-.766 1.697-3.044 2.906-4.088 3.297c-2.118-.568-3.609-2.433-4.089-3.297"/><path fill="#303435" d="M12.05 6.526c-1.802 0-4.501.956-5.25 1.916c-1.403 6.897 2.862 9.946 5.2 10.506c5.498-1.436 5.797-7.154 5.3-10.506c-1.006-1.2-3.452-1.916-5.25-1.916"/><path fill="#cacad4" d="M10.737 10.346c.573-.186.762-.232.842-.232V7.369c-1.335.18-3.255 1.145-4.05 1.6c-.38.918 0 3.284.24 4.35c.572-.367 2.252-.915 2.968-1.146v3.663c-.952-.185-1.777-1.6-2.017-2.29l-.952.463c.573 2.375 2.78 3.579 3.811 3.886V10.8c-1.145 0-2.472.548-2.947.78V9.894l2.105-.926z"/><path fill="#949398" fill-rule="evenodd" d="M12.42 7.369v10.526c.978-.379 3.075-1.646 3.664-3.663c.45-1.716.615-3.494.489-5.263a8.55 8.55 0 0 0-4.152-1.6m.843 1.263v7.579c.939-.59 2.754-2.78 2.501-6.821c-.518-.253-1.751-.758-2.501-.758" clip-rule="evenodd"/></g><defs><linearGradient id="SVGWL4Wednd" x1="11.937" x2="11.937" y1="4" y2="20.006" gradientUnits="userSpaceOnUse"><stop stop-color="#1ba9d1"/><stop offset="1" stop-color="#126db0"/></linearGradient><linearGradient id="SVGQsql3GJA" x1="12.063" x2="12.063" y1="4" y2="20.006" gradientUnits="userSpaceOnUse"><stop stop-color="#1aa3cb"/><stop offset="1" stop-color="#126db1"/></linearGradient><linearGradient id="SVGytPedcCF" x1="12" x2="12" y1="4" y2="20" gradientUnits="userSpaceOnUse"><stop stop-color="#1868a7"/><stop offset="1" stop-color="#0e59ab"/></linearGradient><clipPath id="SVGHcSWxdhd127"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
React
import type { SVGProps } from "react";
export function TokenBrandedSfdBackground(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(#SVGHcSWxdhd127)"><path fill="#fff" d="M24 0H0v24h24z"/><path fill="url(#SVGWL4Wednd)" d="m11.579 4l-1.023 1.41v.472c-1.347.38-3.929 1.727-5.053 2.354c0 1.318.48 4.627.724 6.118l-.244.236l-.72 1.642l2.164-1.406c-.576-1.508-.56-4.708-.48-6.119c1.154-.943 3.588-1.65 4.632-1.882z"/><path fill="url(#SVGQsql3GJA)" d="m12.42 4l1.024 1.41v.472c1.347.38 3.928 1.727 5.053 2.354c0 1.318-.48 4.627-.724 6.118l.244.236l.72 1.642l-2.164-1.406c.576-1.508.56-4.708.48-6.119c-1.154-.943-3.588-1.65-4.632-1.882z"/><path fill="url(#SVGytPedcCF)" d="m7.911 15.528l-2.408 1.415l1.924.232l.24-.232c.964 1.5 3.289 2.665 4.333 3.057c2.312-.943 3.848-2.43 4.333-3.057l.24.232l1.924-.232l-2.409-1.415c-.766 1.697-3.044 2.906-4.088 3.297c-2.118-.568-3.609-2.433-4.089-3.297"/><path fill="#303435" d="M12.05 6.526c-1.802 0-4.501.956-5.25 1.916c-1.403 6.897 2.862 9.946 5.2 10.506c5.498-1.436 5.797-7.154 5.3-10.506c-1.006-1.2-3.452-1.916-5.25-1.916"/><path fill="#cacad4" d="M10.737 10.346c.573-.186.762-.232.842-.232V7.369c-1.335.18-3.255 1.145-4.05 1.6c-.38.918 0 3.284.24 4.35c.572-.367 2.252-.915 2.968-1.146v3.663c-.952-.185-1.777-1.6-2.017-2.29l-.952.463c.573 2.375 2.78 3.579 3.811 3.886V10.8c-1.145 0-2.472.548-2.947.78V9.894l2.105-.926z"/><path fill="#949398" fillRule="evenodd" d="M12.42 7.369v10.526c.978-.379 3.075-1.646 3.664-3.663c.45-1.716.615-3.494.489-5.263a8.55 8.55 0 0 0-4.152-1.6m.843 1.263v7.579c.939-.59 2.754-2.78 2.501-6.821c-.518-.253-1.751-.758-2.501-.758" clipRule="evenodd"/></g><defs><linearGradient id="SVGWL4Wednd" x1="11.937" x2="11.937" y1="4" y2="20.006" gradientUnits="userSpaceOnUse"><stop stopColor="#1ba9d1"/><stop offset="1" stopColor="#126db0"/></linearGradient><linearGradient id="SVGQsql3GJA" x1="12.063" x2="12.063" y1="4" y2="20.006" gradientUnits="userSpaceOnUse"><stop stopColor="#1aa3cb"/><stop offset="1" stopColor="#126db1"/></linearGradient><linearGradient id="SVGytPedcCF" x1="12" x2="12" y1="4" y2="20" gradientUnits="userSpaceOnUse"><stop stopColor="#1868a7"/><stop offset="1" stopColor="#0e59ab"/></linearGradient><clipPath id="SVGHcSWxdhd127"><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(#SVGHcSWxdhd127)"><path fill="#fff" d="M24 0H0v24h24z"/><path fill="url(#SVGWL4Wednd)" d="m11.579 4l-1.023 1.41v.472c-1.347.38-3.929 1.727-5.053 2.354c0 1.318.48 4.627.724 6.118l-.244.236l-.72 1.642l2.164-1.406c-.576-1.508-.56-4.708-.48-6.119c1.154-.943 3.588-1.65 4.632-1.882z"/><path fill="url(#SVGQsql3GJA)" d="m12.42 4l1.024 1.41v.472c1.347.38 3.928 1.727 5.053 2.354c0 1.318-.48 4.627-.724 6.118l.244.236l.72 1.642l-2.164-1.406c.576-1.508.56-4.708.48-6.119c-1.154-.943-3.588-1.65-4.632-1.882z"/><path fill="url(#SVGytPedcCF)" d="m7.911 15.528l-2.408 1.415l1.924.232l.24-.232c.964 1.5 3.289 2.665 4.333 3.057c2.312-.943 3.848-2.43 4.333-3.057l.24.232l1.924-.232l-2.409-1.415c-.766 1.697-3.044 2.906-4.088 3.297c-2.118-.568-3.609-2.433-4.089-3.297"/><path fill="#303435" d="M12.05 6.526c-1.802 0-4.501.956-5.25 1.916c-1.403 6.897 2.862 9.946 5.2 10.506c5.498-1.436 5.797-7.154 5.3-10.506c-1.006-1.2-3.452-1.916-5.25-1.916"/><path fill="#cacad4" d="M10.737 10.346c.573-.186.762-.232.842-.232V7.369c-1.335.18-3.255 1.145-4.05 1.6c-.38.918 0 3.284.24 4.35c.572-.367 2.252-.915 2.968-1.146v3.663c-.952-.185-1.777-1.6-2.017-2.29l-.952.463c.573 2.375 2.78 3.579 3.811 3.886V10.8c-1.145 0-2.472.548-2.947.78V9.894l2.105-.926z"/><path fill="#949398" fill-rule="evenodd" d="M12.42 7.369v10.526c.978-.379 3.075-1.646 3.664-3.663c.45-1.716.615-3.494.489-5.263a8.55 8.55 0 0 0-4.152-1.6m.843 1.263v7.579c.939-.59 2.754-2.78 2.501-6.821c-.518-.253-1.751-.758-2.501-.758" clip-rule="evenodd"/></g><defs><linearGradient id="SVGWL4Wednd" x1="11.937" x2="11.937" y1="4" y2="20.006" gradientUnits="userSpaceOnUse"><stop stop-color="#1ba9d1"/><stop offset="1" stop-color="#126db0"/></linearGradient><linearGradient id="SVGQsql3GJA" x1="12.063" x2="12.063" y1="4" y2="20.006" gradientUnits="userSpaceOnUse"><stop stop-color="#1aa3cb"/><stop offset="1" stop-color="#126db1"/></linearGradient><linearGradient id="SVGytPedcCF" x1="12" x2="12" y1="4" y2="20" gradientUnits="userSpaceOnUse"><stop stop-color="#1868a7"/><stop offset="1" stop-color="#0e59ab"/></linearGradient><clipPath id="SVGHcSWxdhd127"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg> </template>
CSS
.icon-sfd-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(%23SVGHcSWxdhd127)%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGWL4Wednd)%22%20d%3D%22m11.579%204l-1.023%201.41v.472c-1.347.38-3.929%201.727-5.053%202.354c0%201.318.48%204.627.724%206.118l-.244.236l-.72%201.642l2.164-1.406c-.576-1.508-.56-4.708-.48-6.119c1.154-.943%203.588-1.65%204.632-1.882z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGQsql3GJA)%22%20d%3D%22m12.42%204l1.024%201.41v.472c1.347.38%203.928%201.727%205.053%202.354c0%201.318-.48%204.627-.724%206.118l.244.236l.72%201.642l-2.164-1.406c.576-1.508.56-4.708.48-6.119c-1.154-.943-3.588-1.65-4.632-1.882z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGytPedcCF)%22%20d%3D%22m7.911%2015.528l-2.408%201.415l1.924.232l.24-.232c.964%201.5%203.289%202.665%204.333%203.057c2.312-.943%203.848-2.43%204.333-3.057l.24.232l1.924-.232l-2.409-1.415c-.766%201.697-3.044%202.906-4.088%203.297c-2.118-.568-3.609-2.433-4.089-3.297%22%2F%3E%3Cpath%20fill%3D%22%23303435%22%20d%3D%22M12.05%206.526c-1.802%200-4.501.956-5.25%201.916c-1.403%206.897%202.862%209.946%205.2%2010.506c5.498-1.436%205.797-7.154%205.3-10.506c-1.006-1.2-3.452-1.916-5.25-1.916%22%2F%3E%3Cpath%20fill%3D%22%23cacad4%22%20d%3D%22M10.737%2010.346c.573-.186.762-.232.842-.232V7.369c-1.335.18-3.255%201.145-4.05%201.6c-.38.918%200%203.284.24%204.35c.572-.367%202.252-.915%202.968-1.146v3.663c-.952-.185-1.777-1.6-2.017-2.29l-.952.463c.573%202.375%202.78%203.579%203.811%203.886V10.8c-1.145%200-2.472.548-2.947.78V9.894l2.105-.926z%22%2F%3E%3Cpath%20fill%3D%22%23949398%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12.42%207.369v10.526c.978-.379%203.075-1.646%203.664-3.663c.45-1.716.615-3.494.489-5.263a8.55%208.55%200%200%200-4.152-1.6m.843%201.263v7.579c.939-.59%202.754-2.78%202.501-6.821c-.518-.253-1.751-.758-2.501-.758%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGWL4Wednd%22%20x1%3D%2211.937%22%20x2%3D%2211.937%22%20y1%3D%224%22%20y2%3D%2220.006%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%231ba9d1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23126db0%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGQsql3GJA%22%20x1%3D%2212.063%22%20x2%3D%2212.063%22%20y1%3D%224%22%20y2%3D%2220.006%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%231aa3cb%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23126db1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGytPedcCF%22%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%224%22%20y2%3D%2220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%231868a7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230e59ab%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd127%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(%23SVGHcSWxdhd127)%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGWL4Wednd)%22%20d%3D%22m11.579%204l-1.023%201.41v.472c-1.347.38-3.929%201.727-5.053%202.354c0%201.318.48%204.627.724%206.118l-.244.236l-.72%201.642l2.164-1.406c-.576-1.508-.56-4.708-.48-6.119c1.154-.943%203.588-1.65%204.632-1.882z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGQsql3GJA)%22%20d%3D%22m12.42%204l1.024%201.41v.472c1.347.38%203.928%201.727%205.053%202.354c0%201.318-.48%204.627-.724%206.118l.244.236l.72%201.642l-2.164-1.406c.576-1.508.56-4.708.48-6.119c-1.154-.943-3.588-1.65-4.632-1.882z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGytPedcCF)%22%20d%3D%22m7.911%2015.528l-2.408%201.415l1.924.232l.24-.232c.964%201.5%203.289%202.665%204.333%203.057c2.312-.943%203.848-2.43%204.333-3.057l.24.232l1.924-.232l-2.409-1.415c-.766%201.697-3.044%202.906-4.088%203.297c-2.118-.568-3.609-2.433-4.089-3.297%22%2F%3E%3Cpath%20fill%3D%22%23303435%22%20d%3D%22M12.05%206.526c-1.802%200-4.501.956-5.25%201.916c-1.403%206.897%202.862%209.946%205.2%2010.506c5.498-1.436%205.797-7.154%205.3-10.506c-1.006-1.2-3.452-1.916-5.25-1.916%22%2F%3E%3Cpath%20fill%3D%22%23cacad4%22%20d%3D%22M10.737%2010.346c.573-.186.762-.232.842-.232V7.369c-1.335.18-3.255%201.145-4.05%201.6c-.38.918%200%203.284.24%204.35c.572-.367%202.252-.915%202.968-1.146v3.663c-.952-.185-1.777-1.6-2.017-2.29l-.952.463c.573%202.375%202.78%203.579%203.811%203.886V10.8c-1.145%200-2.472.548-2.947.78V9.894l2.105-.926z%22%2F%3E%3Cpath%20fill%3D%22%23949398%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12.42%207.369v10.526c.978-.379%203.075-1.646%203.664-3.663c.45-1.716.615-3.494.489-5.263a8.55%208.55%200%200%200-4.152-1.6m.843%201.263v7.579c.939-.59%202.754-2.78%202.501-6.821c-.518-.253-1.751-.758-2.501-.758%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGWL4Wednd%22%20x1%3D%2211.937%22%20x2%3D%2211.937%22%20y1%3D%224%22%20y2%3D%2220.006%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%231ba9d1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23126db0%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGQsql3GJA%22%20x1%3D%2212.063%22%20x2%3D%2212.063%22%20y1%3D%224%22%20y2%3D%2220.006%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%231aa3cb%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23126db1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGytPedcCF%22%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%224%22%20y2%3D%2220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%231868a7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230e59ab%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd127%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/sfd-background.svg?color=%231a73e8&size=48
