mode heat cool icon

mode-heat-cool from Material Symbols by Google · Regular · Household · Apache-2.0 Free for personal and commercial use.

Name: mode-heat-cool
Set: Material Symbols
Style: Regular
Category: Household
Viewbox: 24×24
License: Apache 2.0
Aliases: mode-heat-cool-sharp

3 other variants in Material Symbols

mode-heat-cool-outline mode-heat-cool-outline-rounded mode-heat-cool-rounded

The same icon in other sets

mode-heat-coolMaterial Symbols Light

More household icons from Material Symbols

Use the mode heat cool icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.425 16.05Q4.3 15.225 3.65 13.988T3 11.25q0-1.975.938-3.512T6 5.15t2.063-1.6L9 3v2.475q0 .625.45 1.063t1.075.437q.35 0 .65-.15t.5-.425L12 6q.95.525 1.625 1.337T14.65 9.15l-2.575 2.575l-.112-.112l-.113-.113L9 8.7l-2.8 2.8q-.55.55-.875 1.263T5 14.275q0 .5.113.938t.312.837m2.45-.125q-.4-.275-.637-.712T7 14.275q0-.425.163-.75t.437-.6l1.4-1.4l1.425 1.375q.075.05.125.125t.1.125zM7.4 22L6 20.6L19.6 7L21 8.4L17.4 12H21v2h-5.6l-.5.5l1.5 1.5H21v2h-2.6l2.1 2.1l-1.4 1.4l-2.1-2.1V22h-2v-4.6l-1.5-1.5l-.5.5V22h-2v-3.6z"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsModeHeatCool(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="M5.425 16.05Q4.3 15.225 3.65 13.988T3 11.25q0-1.975.938-3.512T6 5.15t2.063-1.6L9 3v2.475q0 .625.45 1.063t1.075.437q.35 0 .65-.15t.5-.425L12 6q.95.525 1.625 1.337T14.65 9.15l-2.575 2.575l-.112-.112l-.113-.113L9 8.7l-2.8 2.8q-.55.55-.875 1.263T5 14.275q0 .5.113.938t.312.837m2.45-.125q-.4-.275-.637-.712T7 14.275q0-.425.163-.75t.437-.6l1.4-1.4l1.425 1.375q.075.05.125.125t.1.125zM7.4 22L6 20.6L19.6 7L21 8.4L17.4 12H21v2h-5.6l-.5.5l1.5 1.5H21v2h-2.6l2.1 2.1l-1.4 1.4l-2.1-2.1V22h-2v-4.6l-1.5-1.5l-.5.5V22h-2v-3.6z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.425 16.05Q4.3 15.225 3.65 13.988T3 11.25q0-1.975.938-3.512T6 5.15t2.063-1.6L9 3v2.475q0 .625.45 1.063t1.075.437q.35 0 .65-.15t.5-.425L12 6q.95.525 1.625 1.337T14.65 9.15l-2.575 2.575l-.112-.112l-.113-.113L9 8.7l-2.8 2.8q-.55.55-.875 1.263T5 14.275q0 .5.113.938t.312.837m2.45-.125q-.4-.275-.637-.712T7 14.275q0-.425.163-.75t.437-.6l1.4-1.4l1.425 1.375q.075.05.125.125t.1.125zM7.4 22L6 20.6L19.6 7L21 8.4L17.4 12H21v2h-5.6l-.5.5l1.5 1.5H21v2h-2.6l2.1 2.1l-1.4 1.4l-2.1-2.1V22h-2v-4.6l-1.5-1.5l-.5.5V22h-2v-3.6z"/></svg>
</template>

CSS

.icon-mode-heat-cool {
  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%22M5.425%2016.05Q4.3%2015.225%203.65%2013.988T3%2011.25q0-1.975.938-3.512T6%205.15t2.063-1.6L9%203v2.475q0%20.625.45%201.063t1.075.437q.35%200%20.65-.15t.5-.425L12%206q.95.525%201.625%201.337T14.65%209.15l-2.575%202.575l-.112-.112l-.113-.113L9%208.7l-2.8%202.8q-.55.55-.875%201.263T5%2014.275q0%20.5.113.938t.312.837m2.45-.125q-.4-.275-.637-.712T7%2014.275q0-.425.163-.75t.437-.6l1.4-1.4l1.425%201.375q.075.05.125.125t.1.125zM7.4%2022L6%2020.6L19.6%207L21%208.4L17.4%2012H21v2h-5.6l-.5.5l1.5%201.5H21v2h-2.6l2.1%202.1l-1.4%201.4l-2.1-2.1V22h-2v-4.6l-1.5-1.5l-.5.5V22h-2v-3.6z%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%22M5.425%2016.05Q4.3%2015.225%203.65%2013.988T3%2011.25q0-1.975.938-3.512T6%205.15t2.063-1.6L9%203v2.475q0%20.625.45%201.063t1.075.437q.35%200%20.65-.15t.5-.425L12%206q.95.525%201.625%201.337T14.65%209.15l-2.575%202.575l-.112-.112l-.113-.113L9%208.7l-2.8%202.8q-.55.55-.875%201.263T5%2014.275q0%20.5.113.938t.312.837m2.45-.125q-.4-.275-.637-.712T7%2014.275q0-.425.163-.75t.437-.6l1.4-1.4l1.425%201.375q.075.05.125.125t.1.125zM7.4%2022L6%2020.6L19.6%207L21%208.4L17.4%2012H21v2h-5.6l-.5.5l1.5%201.5H21v2h-2.6l2.1%202.1l-1.4%201.4l-2.1-2.1V22h-2v-4.6l-1.5-1.5l-.5.5V22h-2v-3.6z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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