sui logo

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

Name
sui
Set
Web3 Icons Branded
Style
Branded
Viewbox
24×24
License
MIT

1 other variant in Web3 Icons Branded

sui-background

The same logo in other sets

suiSimple IconssuiWeb3 Icons

Use the sui logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#4ba2ff" d="M16.129 10.508a5.44 5.44 0 0 1 1.148 3.356a5.47 5.47 0 0 1-1.18 3.399l-.064.079l-.015-.106a5 5 0 0 0-.053-.26c-.37-1.656-1.567-3.08-3.547-4.234c-1.334-.773-2.102-1.705-2.303-2.763a4.1 4.1 0 0 1 .159-1.97c.15-.494.385-.96.694-1.376l.773-.963a.333.333 0 0 1 .518 0zm1.217-.963L12.19 3.092a.243.243 0 0 0-.38 0L6.652 9.55l-.016.016a7.1 7.1 0 0 0-1.519 4.404C5.118 17.85 8.2 21 12 21s6.881-3.15 6.881-7.03a7.1 7.1 0 0 0-1.519-4.404zm-9.46.942l.461-.577l.016.106l.037.254c.302 1.604 1.366 2.938 3.15 3.97c1.55.905 2.45 1.943 2.71 3.081c.106.476.127.942.08 1.35v.026l-.022.01c-.72.36-1.513.547-2.318.546c-2.912 0-5.278-2.414-5.278-5.389c0-1.275.434-2.45 1.165-3.377"/></svg>

React

import type { SVGProps } from "react";

export function TokenBrandedSui(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#4ba2ff" d="M16.129 10.508a5.44 5.44 0 0 1 1.148 3.356a5.47 5.47 0 0 1-1.18 3.399l-.064.079l-.015-.106a5 5 0 0 0-.053-.26c-.37-1.656-1.567-3.08-3.547-4.234c-1.334-.773-2.102-1.705-2.303-2.763a4.1 4.1 0 0 1 .159-1.97c.15-.494.385-.96.694-1.376l.773-.963a.333.333 0 0 1 .518 0zm1.217-.963L12.19 3.092a.243.243 0 0 0-.38 0L6.652 9.55l-.016.016a7.1 7.1 0 0 0-1.519 4.404C5.118 17.85 8.2 21 12 21s6.881-3.15 6.881-7.03a7.1 7.1 0 0 0-1.519-4.404zm-9.46.942l.461-.577l.016.106l.037.254c.302 1.604 1.366 2.938 3.15 3.97c1.55.905 2.45 1.943 2.71 3.081c.106.476.127.942.08 1.35v.026l-.022.01c-.72.36-1.513.547-2.318.546c-2.912 0-5.278-2.414-5.278-5.389c0-1.275.434-2.45 1.165-3.377"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#4ba2ff" d="M16.129 10.508a5.44 5.44 0 0 1 1.148 3.356a5.47 5.47 0 0 1-1.18 3.399l-.064.079l-.015-.106a5 5 0 0 0-.053-.26c-.37-1.656-1.567-3.08-3.547-4.234c-1.334-.773-2.102-1.705-2.303-2.763a4.1 4.1 0 0 1 .159-1.97c.15-.494.385-.96.694-1.376l.773-.963a.333.333 0 0 1 .518 0zm1.217-.963L12.19 3.092a.243.243 0 0 0-.38 0L6.652 9.55l-.016.016a7.1 7.1 0 0 0-1.519 4.404C5.118 17.85 8.2 21 12 21s6.881-3.15 6.881-7.03a7.1 7.1 0 0 0-1.519-4.404zm-9.46.942l.461-.577l.016.106l.037.254c.302 1.604 1.366 2.938 3.15 3.97c1.55.905 2.45 1.943 2.71 3.081c.106.476.127.942.08 1.35v.026l-.022.01c-.72.36-1.513.547-2.318.546c-2.912 0-5.278-2.414-5.278-5.389c0-1.275.434-2.45 1.165-3.377"/></svg>
</template>

CSS

.icon-sui {
  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%3Cpath%20fill%3D%22%234ba2ff%22%20d%3D%22M16.129%2010.508a5.44%205.44%200%200%201%201.148%203.356a5.47%205.47%200%200%201-1.18%203.399l-.064.079l-.015-.106a5%205%200%200%200-.053-.26c-.37-1.656-1.567-3.08-3.547-4.234c-1.334-.773-2.102-1.705-2.303-2.763a4.1%204.1%200%200%201%20.159-1.97c.15-.494.385-.96.694-1.376l.773-.963a.333.333%200%200%201%20.518%200zm1.217-.963L12.19%203.092a.243.243%200%200%200-.38%200L6.652%209.55l-.016.016a7.1%207.1%200%200%200-1.519%204.404C5.118%2017.85%208.2%2021%2012%2021s6.881-3.15%206.881-7.03a7.1%207.1%200%200%200-1.519-4.404zm-9.46.942l.461-.577l.016.106l.037.254c.302%201.604%201.366%202.938%203.15%203.97c1.55.905%202.45%201.943%202.71%203.081c.106.476.127.942.08%201.35v.026l-.022.01c-.72.36-1.513.547-2.318.546c-2.912%200-5.278-2.414-5.278-5.389c0-1.275.434-2.45%201.165-3.377%22%2F%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%3Cpath%20fill%3D%22%234ba2ff%22%20d%3D%22M16.129%2010.508a5.44%205.44%200%200%201%201.148%203.356a5.47%205.47%200%200%201-1.18%203.399l-.064.079l-.015-.106a5%205%200%200%200-.053-.26c-.37-1.656-1.567-3.08-3.547-4.234c-1.334-.773-2.102-1.705-2.303-2.763a4.1%204.1%200%200%201%20.159-1.97c.15-.494.385-.96.694-1.376l.773-.963a.333.333%200%200%201%20.518%200zm1.217-.963L12.19%203.092a.243.243%200%200%200-.38%200L6.652%209.55l-.016.016a7.1%207.1%200%200%200-1.519%204.404C5.118%2017.85%208.2%2021%2012%2021s6.881-3.15%206.881-7.03a7.1%207.1%200%200%200-1.519-4.404zm-9.46.942l.461-.577l.016.106l.037.254c.302%201.604%201.366%202.938%203.15%203.97c1.55.905%202.45%201.943%202.71%203.081c.106.476.127.942.08%201.35v.026l-.022.01c-.72.36-1.513.547-2.318.546c-2.912%200-5.278-2.414-5.278-5.389c0-1.275.434-2.45%201.165-3.377%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/token-branded/sui.svg?color=%231a73e8&size=48