chromatic icon logo

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

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

Use the chromatic icon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><circle cx="128" cy="128" r="128" fill="#fc521f"/><path fill="#fff" d="m158.16 187.016l-20.39-11.769l61.343-35.383a46 46 0 0 0 6.63-4.65c7.975 11.353 8.757 26.303 1.65 38.615a36.19 36.19 0 0 1-31.255 18.011a36 36 0 0 1-17.978-4.827zm-4.913 8.5a46 46 0 0 0 7.348 3.422c-5.857 12.57-18.42 20.72-32.652 20.72c-19.865 0-36.037-16.153-36.037-36.006V112.88l31.124 17.962v44.41a4.91 4.91 0 0 0 2.457 4.249zm-73.403-3.682a36.17 36.17 0 0 1-31.24-17.999a35.74 35.74 0 0 1-3.593-27.323a35.77 35.77 0 0 1 16.788-21.87l20.385-11.763l.003 70.76a46 46 0 0 0 .706 8.076c-1.014.08-2.035.12-3.05.12m79.324-87.458l-31.115 17.95l-38.496-22.202a4.93 4.93 0 0 0-4.91 0l-27.76 16.012a45 45 0 0 0-6.637 4.647c-7.968-11.35-8.747-26.303-1.646-38.615a36.19 36.19 0 0 1 31.252-18.014c6.279 0 12.496 1.674 17.978 4.833zm-31.225-68.035c19.875 0 36.038 16.154 36.038 36.016v23.526l-61.326-35.38a45.7 45.7 0 0 0-7.357-3.429c5.854-12.578 18.423-20.733 32.645-20.733M207.39 82.18c9.93 17.198 4.015 39.263-13.196 49.193l-61.335 35.38v-35.905l38.494-22.21a4.9 4.9 0 0 0 2.46-4.25v-32.03c0-2.704-.245-5.399-.71-8.054A36.18 36.18 0 0 1 207.39 82.18"/></svg>

React

import type { SVGProps } from "react";

export function LogosChromaticIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><circle cx="128" cy="128" r="128" fill="#fc521f"/><path fill="#fff" d="m158.16 187.016l-20.39-11.769l61.343-35.383a46 46 0 0 0 6.63-4.65c7.975 11.353 8.757 26.303 1.65 38.615a36.19 36.19 0 0 1-31.255 18.011a36 36 0 0 1-17.978-4.827zm-4.913 8.5a46 46 0 0 0 7.348 3.422c-5.857 12.57-18.42 20.72-32.652 20.72c-19.865 0-36.037-16.153-36.037-36.006V112.88l31.124 17.962v44.41a4.91 4.91 0 0 0 2.457 4.249zm-73.403-3.682a36.17 36.17 0 0 1-31.24-17.999a35.74 35.74 0 0 1-3.593-27.323a35.77 35.77 0 0 1 16.788-21.87l20.385-11.763l.003 70.76a46 46 0 0 0 .706 8.076c-1.014.08-2.035.12-3.05.12m79.324-87.458l-31.115 17.95l-38.496-22.202a4.93 4.93 0 0 0-4.91 0l-27.76 16.012a45 45 0 0 0-6.637 4.647c-7.968-11.35-8.747-26.303-1.646-38.615a36.19 36.19 0 0 1 31.252-18.014c6.279 0 12.496 1.674 17.978 4.833zm-31.225-68.035c19.875 0 36.038 16.154 36.038 36.016v23.526l-61.326-35.38a45.7 45.7 0 0 0-7.357-3.429c5.854-12.578 18.423-20.733 32.645-20.733M207.39 82.18c9.93 17.198 4.015 39.263-13.196 49.193l-61.335 35.38v-35.905l38.494-22.21a4.9 4.9 0 0 0 2.46-4.25v-32.03c0-2.704-.245-5.399-.71-8.054A36.18 36.18 0 0 1 207.39 82.18"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><circle cx="128" cy="128" r="128" fill="#fc521f"/><path fill="#fff" d="m158.16 187.016l-20.39-11.769l61.343-35.383a46 46 0 0 0 6.63-4.65c7.975 11.353 8.757 26.303 1.65 38.615a36.19 36.19 0 0 1-31.255 18.011a36 36 0 0 1-17.978-4.827zm-4.913 8.5a46 46 0 0 0 7.348 3.422c-5.857 12.57-18.42 20.72-32.652 20.72c-19.865 0-36.037-16.153-36.037-36.006V112.88l31.124 17.962v44.41a4.91 4.91 0 0 0 2.457 4.249zm-73.403-3.682a36.17 36.17 0 0 1-31.24-17.999a35.74 35.74 0 0 1-3.593-27.323a35.77 35.77 0 0 1 16.788-21.87l20.385-11.763l.003 70.76a46 46 0 0 0 .706 8.076c-1.014.08-2.035.12-3.05.12m79.324-87.458l-31.115 17.95l-38.496-22.202a4.93 4.93 0 0 0-4.91 0l-27.76 16.012a45 45 0 0 0-6.637 4.647c-7.968-11.35-8.747-26.303-1.646-38.615a36.19 36.19 0 0 1 31.252-18.014c6.279 0 12.496 1.674 17.978 4.833zm-31.225-68.035c19.875 0 36.038 16.154 36.038 36.016v23.526l-61.326-35.38a45.7 45.7 0 0 0-7.357-3.429c5.854-12.578 18.423-20.733 32.645-20.733M207.39 82.18c9.93 17.198 4.015 39.263-13.196 49.193l-61.335 35.38v-35.905l38.494-22.21a4.9 4.9 0 0 0 2.46-4.25v-32.03c0-2.704-.245-5.399-.71-8.054A36.18 36.18 0 0 1 207.39 82.18"/></svg>
</template>

CSS

.icon-chromatic-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%20256%22%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20r%3D%22128%22%20fill%3D%22%23fc521f%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m158.16%20187.016l-20.39-11.769l61.343-35.383a46%2046%200%200%200%206.63-4.65c7.975%2011.353%208.757%2026.303%201.65%2038.615a36.19%2036.19%200%200%201-31.255%2018.011a36%2036%200%200%201-17.978-4.827zm-4.913%208.5a46%2046%200%200%200%207.348%203.422c-5.857%2012.57-18.42%2020.72-32.652%2020.72c-19.865%200-36.037-16.153-36.037-36.006V112.88l31.124%2017.962v44.41a4.91%204.91%200%200%200%202.457%204.249zm-73.403-3.682a36.17%2036.17%200%200%201-31.24-17.999a35.74%2035.74%200%200%201-3.593-27.323a35.77%2035.77%200%200%201%2016.788-21.87l20.385-11.763l.003%2070.76a46%2046%200%200%200%20.706%208.076c-1.014.08-2.035.12-3.05.12m79.324-87.458l-31.115%2017.95l-38.496-22.202a4.93%204.93%200%200%200-4.91%200l-27.76%2016.012a45%2045%200%200%200-6.637%204.647c-7.968-11.35-8.747-26.303-1.646-38.615a36.19%2036.19%200%200%201%2031.252-18.014c6.279%200%2012.496%201.674%2017.978%204.833zm-31.225-68.035c19.875%200%2036.038%2016.154%2036.038%2036.016v23.526l-61.326-35.38a45.7%2045.7%200%200%200-7.357-3.429c5.854-12.578%2018.423-20.733%2032.645-20.733M207.39%2082.18c9.93%2017.198%204.015%2039.263-13.196%2049.193l-61.335%2035.38v-35.905l38.494-22.21a4.9%204.9%200%200%200%202.46-4.25v-32.03c0-2.704-.245-5.399-.71-8.054A36.18%2036.18%200%200%201%20207.39%2082.18%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%20256%22%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20r%3D%22128%22%20fill%3D%22%23fc521f%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m158.16%20187.016l-20.39-11.769l61.343-35.383a46%2046%200%200%200%206.63-4.65c7.975%2011.353%208.757%2026.303%201.65%2038.615a36.19%2036.19%200%200%201-31.255%2018.011a36%2036%200%200%201-17.978-4.827zm-4.913%208.5a46%2046%200%200%200%207.348%203.422c-5.857%2012.57-18.42%2020.72-32.652%2020.72c-19.865%200-36.037-16.153-36.037-36.006V112.88l31.124%2017.962v44.41a4.91%204.91%200%200%200%202.457%204.249zm-73.403-3.682a36.17%2036.17%200%200%201-31.24-17.999a35.74%2035.74%200%200%201-3.593-27.323a35.77%2035.77%200%200%201%2016.788-21.87l20.385-11.763l.003%2070.76a46%2046%200%200%200%20.706%208.076c-1.014.08-2.035.12-3.05.12m79.324-87.458l-31.115%2017.95l-38.496-22.202a4.93%204.93%200%200%200-4.91%200l-27.76%2016.012a45%2045%200%200%200-6.637%204.647c-7.968-11.35-8.747-26.303-1.646-38.615a36.19%2036.19%200%200%201%2031.252-18.014c6.279%200%2012.496%201.674%2017.978%204.833zm-31.225-68.035c19.875%200%2036.038%2016.154%2036.038%2036.016v23.526l-61.326-35.38a45.7%2045.7%200%200%200-7.357-3.429c5.854-12.578%2018.423-20.733%2032.645-20.733M207.39%2082.18c9.93%2017.198%204.015%2039.263-13.196%2049.193l-61.335%2035.38v-35.905l38.494-22.21a4.9%204.9%200%200%200%202.46-4.25v-32.03c0-2.704-.245-5.399-.71-8.054A36.18%2036.18%200%200%201%20207.39%2082.18%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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