kettle icon

kettle from Material Symbols Light by Google · Regular · Household · Apache-2.0 Free for personal and commercial use.

Name: kettle
Set: Material Symbols Light
Style: Regular
Category: Household
Viewbox: 24×24
License: Apache 2.0
Aliases: kettle-sharp

3 other variants in Material Symbols Light

kettle-outline kettle-outline-rounded kettle-rounded

The same icon in other sets

kettleHuge Icons kettleIconPark kettleIconPark Outline kettleIconPark Solid kettleIconPark TwoTone kettleLucide Lab kettleMaterial Symbols kettleMaterial Design Icons

More household icons from Material Symbols Light

Use the kettle icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7 17.846V6.327L4.5 3h12.885v3h2q.666 0 1.14.475T21 7.615v5q0 .667-.475 1.141t-1.14.475h-2v3.615zm10.385-4.615h2q.269 0 .442-.173t.173-.442v-5q0-.27-.173-.443T19.385 7h-2zm-4.616 1.846h1.847V5.769h-1.847zM4 21v-1h16v1z"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightKettle(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="M7 17.846V6.327L4.5 3h12.885v3h2q.666 0 1.14.475T21 7.615v5q0 .667-.475 1.141t-1.14.475h-2v3.615zm10.385-4.615h2q.269 0 .442-.173t.173-.442v-5q0-.27-.173-.443T19.385 7h-2zm-4.616 1.846h1.847V5.769h-1.847zM4 21v-1h16v1z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7 17.846V6.327L4.5 3h12.885v3h2q.666 0 1.14.475T21 7.615v5q0 .667-.475 1.141t-1.14.475h-2v3.615zm10.385-4.615h2q.269 0 .442-.173t.173-.442v-5q0-.27-.173-.443T19.385 7h-2zm-4.616 1.846h1.847V5.769h-1.847zM4 21v-1h16v1z"/></svg>
</template>

CSS

.icon-kettle {
  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%22M7%2017.846V6.327L4.5%203h12.885v3h2q.666%200%201.14.475T21%207.615v5q0%20.667-.475%201.141t-1.14.475h-2v3.615zm10.385-4.615h2q.269%200%20.442-.173t.173-.442v-5q0-.27-.173-.443T19.385%207h-2zm-4.616%201.846h1.847V5.769h-1.847zM4%2021v-1h16v1z%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%22M7%2017.846V6.327L4.5%203h12.885v3h2q.666%200%201.14.475T21%207.615v5q0%20.667-.475%201.141t-1.14.475h-2v3.615zm10.385-4.615h2q.269%200%20.442-.173t.173-.442v-5q0-.27-.173-.443T19.385%207h-2zm-4.616%201.846h1.847V5.769h-1.847zM4%2021v-1h16v1z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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