pixel logo

pixel from Web3 Icons Branded by 0xa3k5 · Branded · MIT Free for personal and commercial use.

Name: pixel
Set: Web3 Icons Branded
Style: Branded
Viewbox: 24×24
License: MIT

1 other variant in Web3 Icons Branded

The same logo in other sets

Use the pixel logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGYQlaCcrW)" d="M7.8 16.2h4.8V21H7.8z"/><path fill="url(#SVGAItScecz)" d="M12.6 3h1.878C18.078 3 21 5.922 21 9.528c0 3.6-2.922 6.672-6.528 6.672H7.8v-9h4.8v4.2h1.878c1.182 0 2.322-.918 2.322-2.1s-1.14-2.1-2.328-2.1H12.6z"/><path fill="url(#SVG2B9hGcqF)" d="M3 11.401h4.8v4.8H3z"/><path fill="url(#SVGsslLxdaF)" d="M7.8 11.401h4.8v4.8H7.8z"/><defs><linearGradient id="SVGYQlaCcrW" x1="3" x2="21" y1="8.4" y2="15.983" gradientUnits="userSpaceOnUse"><stop stop-color="#3eff6e"/><stop offset="1" stop-color="#16ddde"/></linearGradient><linearGradient id="SVGAItScecz" x1="3.205" x2="22.547" y1="7.868" y2="16.606" gradientUnits="userSpaceOnUse"><stop stop-color="#ff5b3c"/><stop offset="1" stop-color="#ff3196"/></linearGradient><linearGradient id="SVG2B9hGcqF" x1="3" x2="21" y1="8.401" y2="15.984" gradientUnits="userSpaceOnUse"><stop stop-color="#ff6f3f"/><stop offset="1" stop-color="#ffc546"/></linearGradient><linearGradient id="SVGsslLxdaF" x1="7.8" x2="12.6" y1="12.841" y2="14.863" gradientUnits="userSpaceOnUse"><stop stop-color="#e059fe"/><stop offset="1" stop-color="#656fff"/></linearGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function TokenBrandedPixel(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"><path fill="url(#SVGYQlaCcrW)" d="M7.8 16.2h4.8V21H7.8z"/><path fill="url(#SVGAItScecz)" d="M12.6 3h1.878C18.078 3 21 5.922 21 9.528c0 3.6-2.922 6.672-6.528 6.672H7.8v-9h4.8v4.2h1.878c1.182 0 2.322-.918 2.322-2.1s-1.14-2.1-2.328-2.1H12.6z"/><path fill="url(#SVG2B9hGcqF)" d="M3 11.401h4.8v4.8H3z"/><path fill="url(#SVGsslLxdaF)" d="M7.8 11.401h4.8v4.8H7.8z"/><defs><linearGradient id="SVGYQlaCcrW" x1="3" x2="21" y1="8.4" y2="15.983" gradientUnits="userSpaceOnUse"><stop stopColor="#3eff6e"/><stop offset="1" stopColor="#16ddde"/></linearGradient><linearGradient id="SVGAItScecz" x1="3.205" x2="22.547" y1="7.868" y2="16.606" gradientUnits="userSpaceOnUse"><stop stopColor="#ff5b3c"/><stop offset="1" stopColor="#ff3196"/></linearGradient><linearGradient id="SVG2B9hGcqF" x1="3" x2="21" y1="8.401" y2="15.984" gradientUnits="userSpaceOnUse"><stop stopColor="#ff6f3f"/><stop offset="1" stopColor="#ffc546"/></linearGradient><linearGradient id="SVGsslLxdaF" x1="7.8" x2="12.6" y1="12.841" y2="14.863" gradientUnits="userSpaceOnUse"><stop stopColor="#e059fe"/><stop offset="1" stopColor="#656fff"/></linearGradient></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"><path fill="url(#SVGYQlaCcrW)" d="M7.8 16.2h4.8V21H7.8z"/><path fill="url(#SVGAItScecz)" d="M12.6 3h1.878C18.078 3 21 5.922 21 9.528c0 3.6-2.922 6.672-6.528 6.672H7.8v-9h4.8v4.2h1.878c1.182 0 2.322-.918 2.322-2.1s-1.14-2.1-2.328-2.1H12.6z"/><path fill="url(#SVG2B9hGcqF)" d="M3 11.401h4.8v4.8H3z"/><path fill="url(#SVGsslLxdaF)" d="M7.8 11.401h4.8v4.8H7.8z"/><defs><linearGradient id="SVGYQlaCcrW" x1="3" x2="21" y1="8.4" y2="15.983" gradientUnits="userSpaceOnUse"><stop stop-color="#3eff6e"/><stop offset="1" stop-color="#16ddde"/></linearGradient><linearGradient id="SVGAItScecz" x1="3.205" x2="22.547" y1="7.868" y2="16.606" gradientUnits="userSpaceOnUse"><stop stop-color="#ff5b3c"/><stop offset="1" stop-color="#ff3196"/></linearGradient><linearGradient id="SVG2B9hGcqF" x1="3" x2="21" y1="8.401" y2="15.984" gradientUnits="userSpaceOnUse"><stop stop-color="#ff6f3f"/><stop offset="1" stop-color="#ffc546"/></linearGradient><linearGradient id="SVGsslLxdaF" x1="7.8" x2="12.6" y1="12.841" y2="14.863" gradientUnits="userSpaceOnUse"><stop stop-color="#e059fe"/><stop offset="1" stop-color="#656fff"/></linearGradient></defs></g></svg>
</template>

CSS

.icon-pixel {
  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%3Cpath%20fill%3D%22url(%23SVGYQlaCcrW)%22%20d%3D%22M7.8%2016.2h4.8V21H7.8z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGAItScecz)%22%20d%3D%22M12.6%203h1.878C18.078%203%2021%205.922%2021%209.528c0%203.6-2.922%206.672-6.528%206.672H7.8v-9h4.8v4.2h1.878c1.182%200%202.322-.918%202.322-2.1s-1.14-2.1-2.328-2.1H12.6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG2B9hGcqF)%22%20d%3D%22M3%2011.401h4.8v4.8H3z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGsslLxdaF)%22%20d%3D%22M7.8%2011.401h4.8v4.8H7.8z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGYQlaCcrW%22%20x1%3D%223%22%20x2%3D%2221%22%20y1%3D%228.4%22%20y2%3D%2215.983%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%233eff6e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2316ddde%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGAItScecz%22%20x1%3D%223.205%22%20x2%3D%2222.547%22%20y1%3D%227.868%22%20y2%3D%2216.606%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff5b3c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff3196%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG2B9hGcqF%22%20x1%3D%223%22%20x2%3D%2221%22%20y1%3D%228.401%22%20y2%3D%2215.984%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff6f3f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffc546%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGsslLxdaF%22%20x1%3D%227.8%22%20x2%3D%2212.6%22%20y1%3D%2212.841%22%20y2%3D%2214.863%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23e059fe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23656fff%22%2F%3E%3C%2FlinearGradient%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%3Cpath%20fill%3D%22url(%23SVGYQlaCcrW)%22%20d%3D%22M7.8%2016.2h4.8V21H7.8z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGAItScecz)%22%20d%3D%22M12.6%203h1.878C18.078%203%2021%205.922%2021%209.528c0%203.6-2.922%206.672-6.528%206.672H7.8v-9h4.8v4.2h1.878c1.182%200%202.322-.918%202.322-2.1s-1.14-2.1-2.328-2.1H12.6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG2B9hGcqF)%22%20d%3D%22M3%2011.401h4.8v4.8H3z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGsslLxdaF)%22%20d%3D%22M7.8%2011.401h4.8v4.8H7.8z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGYQlaCcrW%22%20x1%3D%223%22%20x2%3D%2221%22%20y1%3D%228.4%22%20y2%3D%2215.983%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%233eff6e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2316ddde%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGAItScecz%22%20x1%3D%223.205%22%20x2%3D%2222.547%22%20y1%3D%227.868%22%20y2%3D%2216.606%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff5b3c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff3196%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG2B9hGcqF%22%20x1%3D%223%22%20x2%3D%2221%22%20y1%3D%228.401%22%20y2%3D%2215.984%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff6f3f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffc546%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGsslLxdaF%22%20x1%3D%227.8%22%20x2%3D%2212.6%22%20y1%3D%2212.841%22%20y2%3D%2214.863%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23e059fe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23656fff%22%2F%3E%3C%2FlinearGradient%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/pixel.svg?color=%231a73e8&size=48