home assistant icon
home-assistant from Material Design Icons by Pictogrammers · Filled · Brand / Logo · Apache-2.0 Free for personal and commercial use.
- Name
- home-assistant
- Set
- Material Design Icons
- Style
- Filled
- Category
- Brand / Logo
- Viewbox
- 24×24
- License
- Apache 2.0
More brand / logo icons from Material Design Icons
Use the home assistant icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.8 13H20v8h-7v-3.33l2.79-2.79l.71.12a2.1 2.1 0 1 0 0-4.2a2.1 2.1 0 0 0-2.1 2.1l.1.71l-1.5 1.52V9.65c.66-.36 1.1-1.05 1.1-1.85A2.1 2.1 0 0 0 12 5.7a2.1 2.1 0 0 0-2.1 2.1c0 .8.44 1.49 1.1 1.85v5.48l-1.5-1.52l.1-.71a2.1 2.1 0 0 0-2.1-2.1a2.1 2.1 0 0 0-2.1 2.1A2.1 2.1 0 0 0 7.5 15l.71-.12L11 17.67V21H4v-8H2.25c-.42 0-.83 0-.83-.21c.01-.22.43-.64.86-1.07L11 3c.33-.33.67-.67 1-.67s.67.34 1 .67l4 4V6h2v3l2.78 2.78c.4.4.81.81.82 1.02c0 .2-.4.2-.8.2M7.5 12a.9.9 0 0 1 .9.9a.9.9 0 0 1-.9.9a.9.9 0 0 1-.9-.9a.9.9 0 0 1 .9-.9m9 0c.5 0 .9.4.9.9s-.4.9-.9.9a.9.9 0 0 1-.9-.9a.9.9 0 0 1 .9-.9M12 6.9c.5 0 .9.4.9.9s-.4.9-.9.9s-.9-.4-.9-.9s.4-.9.9-.9"/></svg>
React
import type { SVGProps } from "react";
export function MdiHomeAssistant(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="M21.8 13H20v8h-7v-3.33l2.79-2.79l.71.12a2.1 2.1 0 1 0 0-4.2a2.1 2.1 0 0 0-2.1 2.1l.1.71l-1.5 1.52V9.65c.66-.36 1.1-1.05 1.1-1.85A2.1 2.1 0 0 0 12 5.7a2.1 2.1 0 0 0-2.1 2.1c0 .8.44 1.49 1.1 1.85v5.48l-1.5-1.52l.1-.71a2.1 2.1 0 0 0-2.1-2.1a2.1 2.1 0 0 0-2.1 2.1A2.1 2.1 0 0 0 7.5 15l.71-.12L11 17.67V21H4v-8H2.25c-.42 0-.83 0-.83-.21c.01-.22.43-.64.86-1.07L11 3c.33-.33.67-.67 1-.67s.67.34 1 .67l4 4V6h2v3l2.78 2.78c.4.4.81.81.82 1.02c0 .2-.4.2-.8.2M7.5 12a.9.9 0 0 1 .9.9a.9.9 0 0 1-.9.9a.9.9 0 0 1-.9-.9a.9.9 0 0 1 .9-.9m9 0c.5 0 .9.4.9.9s-.4.9-.9.9a.9.9 0 0 1-.9-.9a.9.9 0 0 1 .9-.9M12 6.9c.5 0 .9.4.9.9s-.4.9-.9.9s-.9-.4-.9-.9s.4-.9.9-.9"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.8 13H20v8h-7v-3.33l2.79-2.79l.71.12a2.1 2.1 0 1 0 0-4.2a2.1 2.1 0 0 0-2.1 2.1l.1.71l-1.5 1.52V9.65c.66-.36 1.1-1.05 1.1-1.85A2.1 2.1 0 0 0 12 5.7a2.1 2.1 0 0 0-2.1 2.1c0 .8.44 1.49 1.1 1.85v5.48l-1.5-1.52l.1-.71a2.1 2.1 0 0 0-2.1-2.1a2.1 2.1 0 0 0-2.1 2.1A2.1 2.1 0 0 0 7.5 15l.71-.12L11 17.67V21H4v-8H2.25c-.42 0-.83 0-.83-.21c.01-.22.43-.64.86-1.07L11 3c.33-.33.67-.67 1-.67s.67.34 1 .67l4 4V6h2v3l2.78 2.78c.4.4.81.81.82 1.02c0 .2-.4.2-.8.2M7.5 12a.9.9 0 0 1 .9.9a.9.9 0 0 1-.9.9a.9.9 0 0 1-.9-.9a.9.9 0 0 1 .9-.9m9 0c.5 0 .9.4.9.9s-.4.9-.9.9a.9.9 0 0 1-.9-.9a.9.9 0 0 1 .9-.9M12 6.9c.5 0 .9.4.9.9s-.4.9-.9.9s-.9-.4-.9-.9s.4-.9.9-.9"/></svg> </template>
CSS
.icon-home-assistant {
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%22M21.8%2013H20v8h-7v-3.33l2.79-2.79l.71.12a2.1%202.1%200%201%200%200-4.2a2.1%202.1%200%200%200-2.1%202.1l.1.71l-1.5%201.52V9.65c.66-.36%201.1-1.05%201.1-1.85A2.1%202.1%200%200%200%2012%205.7a2.1%202.1%200%200%200-2.1%202.1c0%20.8.44%201.49%201.1%201.85v5.48l-1.5-1.52l.1-.71a2.1%202.1%200%200%200-2.1-2.1a2.1%202.1%200%200%200-2.1%202.1A2.1%202.1%200%200%200%207.5%2015l.71-.12L11%2017.67V21H4v-8H2.25c-.42%200-.83%200-.83-.21c.01-.22.43-.64.86-1.07L11%203c.33-.33.67-.67%201-.67s.67.34%201%20.67l4%204V6h2v3l2.78%202.78c.4.4.81.81.82%201.02c0%20.2-.4.2-.8.2M7.5%2012a.9.9%200%200%201%20.9.9a.9.9%200%200%201-.9.9a.9.9%200%200%201-.9-.9a.9.9%200%200%201%20.9-.9m9%200c.5%200%20.9.4.9.9s-.4.9-.9.9a.9.9%200%200%201-.9-.9a.9.9%200%200%201%20.9-.9M12%206.9c.5%200%20.9.4.9.9s-.4.9-.9.9s-.9-.4-.9-.9s.4-.9.9-.9%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%22M21.8%2013H20v8h-7v-3.33l2.79-2.79l.71.12a2.1%202.1%200%201%200%200-4.2a2.1%202.1%200%200%200-2.1%202.1l.1.71l-1.5%201.52V9.65c.66-.36%201.1-1.05%201.1-1.85A2.1%202.1%200%200%200%2012%205.7a2.1%202.1%200%200%200-2.1%202.1c0%20.8.44%201.49%201.1%201.85v5.48l-1.5-1.52l.1-.71a2.1%202.1%200%200%200-2.1-2.1a2.1%202.1%200%200%200-2.1%202.1A2.1%202.1%200%200%200%207.5%2015l.71-.12L11%2017.67V21H4v-8H2.25c-.42%200-.83%200-.83-.21c.01-.22.43-.64.86-1.07L11%203c.33-.33.67-.67%201-.67s.67.34%201%20.67l4%204V6h2v3l2.78%202.78c.4.4.81.81.82%201.02c0%20.2-.4.2-.8.2M7.5%2012a.9.9%200%200%201%20.9.9a.9.9%200%200%201-.9.9a.9.9%200%200%201-.9-.9a.9.9%200%200%201%20.9-.9m9%200c.5%200%20.9.4.9.9s-.4.9-.9.9a.9.9%200%200%201-.9-.9a.9.9%200%200%201%20.9-.9M12%206.9c.5%200%20.9.4.9.9s-.4.9-.9.9s-.9-.4-.9-.9s.4-.9.9-.9%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/home-assistant.svg?color=%231a73e8&size=48
