chronic icon

chronic from Material Symbols Light by Google · Regular · UI Actions · Apache-2.0 Free for personal and commercial use.

Name: chronic
Set: Material Symbols Light
Style: Regular
Category: UI Actions
Viewbox: 24×24
License: Apache 2.0
Aliases: chronic-sharp

3 other variants in Material Symbols Light

chronic-outline chronic-outline-rounded chronic-rounded

The same icon in other sets

chronicMaterial Symbols

More ui actions icons from Material Symbols Light

Use the chronic icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10.037 18.935q-2.973-.362-5.005-2.61T3 11q0-3.333 2.332-5.667T10.996 3t5.667 2.333Q19 7.667 19 11q0 1.44-.5 2.713T17.146 16H12.95q-1.17 0-2.002.8t-.929 1.95q0 .046.003.092q.003.047.014.093M13 13.708l.708-.708l-2.208-2.208V6.5h-1v4.708zM13 21h6q.825 0 1.413-.587T21 19t-.587-1.412T19 17h-6q-.825 0-1.412.588T11 19t.588 1.413T13 21m-.52-1.48q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21m3 0q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21m3 0q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightChronic(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10.037 18.935q-2.973-.362-5.005-2.61T3 11q0-3.333 2.332-5.667T10.996 3t5.667 2.333Q19 7.667 19 11q0 1.44-.5 2.713T17.146 16H12.95q-1.17 0-2.002.8t-.929 1.95q0 .046.003.092q.003.047.014.093M13 13.708l.708-.708l-2.208-2.208V6.5h-1v4.708zM13 21h6q.825 0 1.413-.587T21 19t-.587-1.412T19 17h-6q-.825 0-1.412.588T11 19t.588 1.413T13 21m-.52-1.48q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21m3 0q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21m3 0q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10.037 18.935q-2.973-.362-5.005-2.61T3 11q0-3.333 2.332-5.667T10.996 3t5.667 2.333Q19 7.667 19 11q0 1.44-.5 2.713T17.146 16H12.95q-1.17 0-2.002.8t-.929 1.95q0 .046.003.092q.003.047.014.093M13 13.708l.708-.708l-2.208-2.208V6.5h-1v4.708zM13 21h6q.825 0 1.413-.587T21 19t-.587-1.412T19 17h-6q-.825 0-1.412.588T11 19t.588 1.413T13 21m-.52-1.48q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21m3 0q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21m3 0q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21"/></svg>
</template>

CSS

.icon-chronic {
  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%22currentColor%22%20d%3D%22M10.037%2018.935q-2.973-.362-5.005-2.61T3%2011q0-3.333%202.332-5.667T10.996%203t5.667%202.333Q19%207.667%2019%2011q0%201.44-.5%202.713T17.146%2016H12.95q-1.17%200-2.002.8t-.929%201.95q0%20.046.003.092q.003.047.014.093M13%2013.708l.708-.708l-2.208-2.208V6.5h-1v4.708zM13%2021h6q.825%200%201.413-.587T21%2019t-.587-1.412T19%2017h-6q-.825%200-1.412.588T11%2019t.588%201.413T13%2021m-.52-1.48q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21m3%200q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21m3%200q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21%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%22currentColor%22%20d%3D%22M10.037%2018.935q-2.973-.362-5.005-2.61T3%2011q0-3.333%202.332-5.667T10.996%203t5.667%202.333Q19%207.667%2019%2011q0%201.44-.5%202.713T17.146%2016H12.95q-1.17%200-2.002.8t-.929%201.95q0%20.046.003.092q.003.047.014.093M13%2013.708l.708-.708l-2.208-2.208V6.5h-1v4.708zM13%2021h6q.825%200%201.413-.587T21%2019t-.587-1.412T19%2017h-6q-.825%200-1.412.588T11%2019t.588%201.413T13%2021m-.52-1.48q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21m3%200q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21m3%200q-.21-.209-.21-.52t.21-.52q.209-.21.52-.21t.52.21q.21.209.21.52t-.21.52q-.209.21-.52.21t-.52-.21%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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