matter icon logo

matter-icon from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
matter-icon
Set
SVG Logos
Style
Color
Viewbox
256×251
License
CC0

Use the matter icon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 251"><path fill="#231f20" d="M76.02 64.287a82.3 82.3 0 0 0 37.215 17.077V8.556L128.064 0l14.816 8.556v72.808a82.4 82.4 0 0 0 37.228-17.077l26.92 15.57c-43.782 43.316-114.274 43.316-158.056 0zm32.717 185.928C124.35 190.623 89.072 129.57 29.645 113.34v31.152a82.4 82.4 0 0 1 33.413 23.686L0 204.582v17.124l14.828 8.51l63.047-36.404a82.3 82.3 0 0 1 3.814 40.774zM226.413 113.34c-59.395 16.266-94.634 77.305-79.023 136.875l26.979-15.582a82.4 82.4 0 0 1 3.814-40.775l63 36.358L256 221.66v-17.078l-63.058-36.404a82.5 82.5 0 0 1 33.413-23.686z"/></svg>

React

import type { SVGProps } from "react";

export function LogosMatterIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 251"><path fill="#231f20" d="M76.02 64.287a82.3 82.3 0 0 0 37.215 17.077V8.556L128.064 0l14.816 8.556v72.808a82.4 82.4 0 0 0 37.228-17.077l26.92 15.57c-43.782 43.316-114.274 43.316-158.056 0zm32.717 185.928C124.35 190.623 89.072 129.57 29.645 113.34v31.152a82.4 82.4 0 0 1 33.413 23.686L0 204.582v17.124l14.828 8.51l63.047-36.404a82.3 82.3 0 0 1 3.814 40.774zM226.413 113.34c-59.395 16.266-94.634 77.305-79.023 136.875l26.979-15.582a82.4 82.4 0 0 1 3.814-40.775l63 36.358L256 221.66v-17.078l-63.058-36.404a82.5 82.5 0 0 1 33.413-23.686z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 251"><path fill="#231f20" d="M76.02 64.287a82.3 82.3 0 0 0 37.215 17.077V8.556L128.064 0l14.816 8.556v72.808a82.4 82.4 0 0 0 37.228-17.077l26.92 15.57c-43.782 43.316-114.274 43.316-158.056 0zm32.717 185.928C124.35 190.623 89.072 129.57 29.645 113.34v31.152a82.4 82.4 0 0 1 33.413 23.686L0 204.582v17.124l14.828 8.51l63.047-36.404a82.3 82.3 0 0 1 3.814 40.774zM226.413 113.34c-59.395 16.266-94.634 77.305-79.023 136.875l26.979-15.582a82.4 82.4 0 0 1 3.814-40.775l63 36.358L256 221.66v-17.078l-63.058-36.404a82.5 82.5 0 0 1 33.413-23.686z"/></svg>
</template>

CSS

.icon-matter-icon {
  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%20256%20251%22%3E%3Cpath%20fill%3D%22%23231f20%22%20d%3D%22M76.02%2064.287a82.3%2082.3%200%200%200%2037.215%2017.077V8.556L128.064%200l14.816%208.556v72.808a82.4%2082.4%200%200%200%2037.228-17.077l26.92%2015.57c-43.782%2043.316-114.274%2043.316-158.056%200zm32.717%20185.928C124.35%20190.623%2089.072%20129.57%2029.645%20113.34v31.152a82.4%2082.4%200%200%201%2033.413%2023.686L0%20204.582v17.124l14.828%208.51l63.047-36.404a82.3%2082.3%200%200%201%203.814%2040.774zM226.413%20113.34c-59.395%2016.266-94.634%2077.305-79.023%20136.875l26.979-15.582a82.4%2082.4%200%200%201%203.814-40.775l63%2036.358L256%20221.66v-17.078l-63.058-36.404a82.5%2082.5%200%200%201%2033.413-23.686z%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%20256%20251%22%3E%3Cpath%20fill%3D%22%23231f20%22%20d%3D%22M76.02%2064.287a82.3%2082.3%200%200%200%2037.215%2017.077V8.556L128.064%200l14.816%208.556v72.808a82.4%2082.4%200%200%200%2037.228-17.077l26.92%2015.57c-43.782%2043.316-114.274%2043.316-158.056%200zm32.717%20185.928C124.35%20190.623%2089.072%20129.57%2029.645%20113.34v31.152a82.4%2082.4%200%200%201%2033.413%2023.686L0%20204.582v17.124l14.828%208.51l63.047-36.404a82.3%2082.3%200%200%201%203.814%2040.774zM226.413%20113.34c-59.395%2016.266-94.634%2077.305-79.023%20136.875l26.979-15.582a82.4%2082.4%200%200%201%203.814-40.775l63%2036.358L256%20221.66v-17.078l-63.058-36.404a82.5%2082.5%200%200%201%2033.413-23.686z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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