chromatic logo
chromatic from Material Icon Theme by Material Extensions · Color · MIT Free for personal and commercial use.
- Name
- chromatic
- Set
- Material Icon Theme
- Style
- Color
- Viewbox
- 16×16
- License
- MIT
The same logo in other sets
Use the chromatic logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="#ff5722" d="m10.326 12.544l-1.556-.901l4.667-2.702c.164-.082.327-.246.491-.327c.655.901.655 2.047.164 2.947c-.737 1.31-2.456 1.801-3.766.982Zm.246.9C10.081 14.426 9.18 15 8.034 15a2.76 2.76 0 0 1-2.784-2.784V6.812l2.374 1.392v3.439c0 .164 0 .246.164.327l2.129 1.228s.409.164.655.246m-6.222-.491c-.982 0-1.883-.491-2.374-1.392c-.327-.655-.491-1.392-.246-2.129c.164-.737.655-1.31 1.31-1.637l1.556-.901v6.058zm3.684-5.321L5.087 5.913h-.409L2.549 7.141c-.164.082-.327.246-.491.327c-.655-.901-.655-2.047-.164-2.947c.491-.819 1.392-1.392 2.374-1.392c.491 0 .982.164 1.392.409l4.708 2.726zm0-6.632a2.76 2.76 0 0 1 2.784 2.784v1.801L6.151 2.883c-.164-.082-.327-.164-.573-.246C6.069 1.655 6.479 1 8.034 1m6.418 4.748c.059 1.009-.417 2.018-1.341 2.538l-4.667 2.702V8.204l2.947-1.719c.082 0 .164-.164.164-.327V3.047c1.032-.079 2.79.856 2.897 2.702Z"/></svg>
React
import type { SVGProps } from "react";
export function MaterialIconThemeChromatic(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="#ff5722" d="m10.326 12.544l-1.556-.901l4.667-2.702c.164-.082.327-.246.491-.327c.655.901.655 2.047.164 2.947c-.737 1.31-2.456 1.801-3.766.982Zm.246.9C10.081 14.426 9.18 15 8.034 15a2.76 2.76 0 0 1-2.784-2.784V6.812l2.374 1.392v3.439c0 .164 0 .246.164.327l2.129 1.228s.409.164.655.246m-6.222-.491c-.982 0-1.883-.491-2.374-1.392c-.327-.655-.491-1.392-.246-2.129c.164-.737.655-1.31 1.31-1.637l1.556-.901v6.058zm3.684-5.321L5.087 5.913h-.409L2.549 7.141c-.164.082-.327.246-.491.327c-.655-.901-.655-2.047-.164-2.947c.491-.819 1.392-1.392 2.374-1.392c.491 0 .982.164 1.392.409l4.708 2.726zm0-6.632a2.76 2.76 0 0 1 2.784 2.784v1.801L6.151 2.883c-.164-.082-.327-.164-.573-.246C6.069 1.655 6.479 1 8.034 1m6.418 4.748c.059 1.009-.417 2.018-1.341 2.538l-4.667 2.702V8.204l2.947-1.719c.082 0 .164-.164.164-.327V3.047c1.032-.079 2.79.856 2.897 2.702Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="#ff5722" d="m10.326 12.544l-1.556-.901l4.667-2.702c.164-.082.327-.246.491-.327c.655.901.655 2.047.164 2.947c-.737 1.31-2.456 1.801-3.766.982Zm.246.9C10.081 14.426 9.18 15 8.034 15a2.76 2.76 0 0 1-2.784-2.784V6.812l2.374 1.392v3.439c0 .164 0 .246.164.327l2.129 1.228s.409.164.655.246m-6.222-.491c-.982 0-1.883-.491-2.374-1.392c-.327-.655-.491-1.392-.246-2.129c.164-.737.655-1.31 1.31-1.637l1.556-.901v6.058zm3.684-5.321L5.087 5.913h-.409L2.549 7.141c-.164.082-.327.246-.491.327c-.655-.901-.655-2.047-.164-2.947c.491-.819 1.392-1.392 2.374-1.392c.491 0 .982.164 1.392.409l4.708 2.726zm0-6.632a2.76 2.76 0 0 1 2.784 2.784v1.801L6.151 2.883c-.164-.082-.327-.164-.573-.246C6.069 1.655 6.479 1 8.034 1m6.418 4.748c.059 1.009-.417 2.018-1.341 2.538l-4.667 2.702V8.204l2.947-1.719c.082 0 .164-.164.164-.327V3.047c1.032-.079 2.79.856 2.897 2.702Z"/></svg> </template>
CSS
.icon-chromatic {
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%2016%2016%22%3E%3Cpath%20fill%3D%22%23ff5722%22%20d%3D%22m10.326%2012.544l-1.556-.901l4.667-2.702c.164-.082.327-.246.491-.327c.655.901.655%202.047.164%202.947c-.737%201.31-2.456%201.801-3.766.982Zm.246.9C10.081%2014.426%209.18%2015%208.034%2015a2.76%202.76%200%200%201-2.784-2.784V6.812l2.374%201.392v3.439c0%20.164%200%20.246.164.327l2.129%201.228s.409.164.655.246m-6.222-.491c-.982%200-1.883-.491-2.374-1.392c-.327-.655-.491-1.392-.246-2.129c.164-.737.655-1.31%201.31-1.637l1.556-.901v6.058zm3.684-5.321L5.087%205.913h-.409L2.549%207.141c-.164.082-.327.246-.491.327c-.655-.901-.655-2.047-.164-2.947c.491-.819%201.392-1.392%202.374-1.392c.491%200%20.982.164%201.392.409l4.708%202.726zm0-6.632a2.76%202.76%200%200%201%202.784%202.784v1.801L6.151%202.883c-.164-.082-.327-.164-.573-.246C6.069%201.655%206.479%201%208.034%201m6.418%204.748c.059%201.009-.417%202.018-1.341%202.538l-4.667%202.702V8.204l2.947-1.719c.082%200%20.164-.164.164-.327V3.047c1.032-.079%202.79.856%202.897%202.702Z%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%2016%2016%22%3E%3Cpath%20fill%3D%22%23ff5722%22%20d%3D%22m10.326%2012.544l-1.556-.901l4.667-2.702c.164-.082.327-.246.491-.327c.655.901.655%202.047.164%202.947c-.737%201.31-2.456%201.801-3.766.982Zm.246.9C10.081%2014.426%209.18%2015%208.034%2015a2.76%202.76%200%200%201-2.784-2.784V6.812l2.374%201.392v3.439c0%20.164%200%20.246.164.327l2.129%201.228s.409.164.655.246m-6.222-.491c-.982%200-1.883-.491-2.374-1.392c-.327-.655-.491-1.392-.246-2.129c.164-.737.655-1.31%201.31-1.637l1.556-.901v6.058zm3.684-5.321L5.087%205.913h-.409L2.549%207.141c-.164.082-.327.246-.491.327c-.655-.901-.655-2.047-.164-2.947c.491-.819%201.392-1.392%202.374-1.392c.491%200%20.982.164%201.392.409l4.708%202.726zm0-6.632a2.76%202.76%200%200%201%202.784%202.784v1.801L6.151%202.883c-.164-.082-.327-.164-.573-.246C6.069%201.655%206.479%201%208.034%201m6.418%204.748c.059%201.009-.417%202.018-1.341%202.538l-4.667%202.702V8.204l2.947-1.719c.082%200%20.164-.164.164-.327V3.047c1.032-.079%202.79.856%202.897%202.702Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-icon-theme/chromatic.svg?color=%231a73e8&size=48
