light recessed icon

light-recessed from Material Design Icons by Pictogrammers · Filled · Home Automation · Apache-2.0 Free for personal and commercial use.

Name: light-recessed
Set: Material Design Icons
Style: Filled
Category: Home Automation
Viewbox: 24×24
License: Apache 2.0
Aliases: can-light, downlight, hi-hat-light, high-hat-light, pot-light

More home automation icons from Material Design Icons

Use the light recessed icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7C6.5 7 2 9.46 2 12.5S6.5 18 12 18s10-2.46 10-5.5S17.5 7 12 7m4.5 3c0 .4-1.6 1.54-4.5 1.54S7.5 10.4 7.5 10c0-.09.15-.26.4-.45C9.06 9.21 10.44 9 12 9s2.94.21 4.1.55c.25.19.4.36.4.45M12 16c-4.88 0-8-2.07-8-3.5c0-.69.73-1.5 2.03-2.21c.27 1.54 2.84 2.75 5.97 2.75s5.7-1.21 5.97-2.75C19.27 11 20 11.81 20 12.5c0 1.43-3.12 3.5-8 3.5"/></svg>

React

import type { SVGProps } from "react";

export function MdiLightRecessed(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="M12 7C6.5 7 2 9.46 2 12.5S6.5 18 12 18s10-2.46 10-5.5S17.5 7 12 7m4.5 3c0 .4-1.6 1.54-4.5 1.54S7.5 10.4 7.5 10c0-.09.15-.26.4-.45C9.06 9.21 10.44 9 12 9s2.94.21 4.1.55c.25.19.4.36.4.45M12 16c-4.88 0-8-2.07-8-3.5c0-.69.73-1.5 2.03-2.21c.27 1.54 2.84 2.75 5.97 2.75s5.7-1.21 5.97-2.75C19.27 11 20 11.81 20 12.5c0 1.43-3.12 3.5-8 3.5"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7C6.5 7 2 9.46 2 12.5S6.5 18 12 18s10-2.46 10-5.5S17.5 7 12 7m4.5 3c0 .4-1.6 1.54-4.5 1.54S7.5 10.4 7.5 10c0-.09.15-.26.4-.45C9.06 9.21 10.44 9 12 9s2.94.21 4.1.55c.25.19.4.36.4.45M12 16c-4.88 0-8-2.07-8-3.5c0-.69.73-1.5 2.03-2.21c.27 1.54 2.84 2.75 5.97 2.75s5.7-1.21 5.97-2.75C19.27 11 20 11.81 20 12.5c0 1.43-3.12 3.5-8 3.5"/></svg>
</template>

CSS

.icon-light-recessed {
  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%22M12%207C6.5%207%202%209.46%202%2012.5S6.5%2018%2012%2018s10-2.46%2010-5.5S17.5%207%2012%207m4.5%203c0%20.4-1.6%201.54-4.5%201.54S7.5%2010.4%207.5%2010c0-.09.15-.26.4-.45C9.06%209.21%2010.44%209%2012%209s2.94.21%204.1.55c.25.19.4.36.4.45M12%2016c-4.88%200-8-2.07-8-3.5c0-.69.73-1.5%202.03-2.21c.27%201.54%202.84%202.75%205.97%202.75s5.7-1.21%205.97-2.75C19.27%2011%2020%2011.81%2020%2012.5c0%201.43-3.12%203.5-8%203.5%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%22M12%207C6.5%207%202%209.46%202%2012.5S6.5%2018%2012%2018s10-2.46%2010-5.5S17.5%207%2012%207m4.5%203c0%20.4-1.6%201.54-4.5%201.54S7.5%2010.4%207.5%2010c0-.09.15-.26.4-.45C9.06%209.21%2010.44%209%2012%209s2.94.21%204.1.55c.25.19.4.36.4.45M12%2016c-4.88%200-8-2.07-8-3.5c0-.69.73-1.5%202.03-2.21c.27%201.54%202.84%202.75%205.97%202.75s5.7-1.21%205.97-2.75C19.27%2011%2020%2011.81%2020%2012.5c0%201.43-3.12%203.5-8%203.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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