[Home](/index.md) › [Icons](/icons.md) › Home Assistant

# Home Assistant

Home Assistant is an open-source home automation platform that runs locally and connects thousands of smart home devices and services, backed by the Open Home Foundation.

## At a glance

- **Page**: https://devicons.io/icons/home-assistant/
- **Website**: https://www.home-assistant.io/
- **Also known as**: HA, Hass, Home Assistant OS, HassOS
- **Tags**: [Smart Home](/icons/tag/smart-home/), [IoT](/icons/tag/iot/), [Automation](/icons/tag/automation/), [Open Source](/icons/tag/open-source/), [Self Hosted](/icons/tag/self-hosted/)
- **Version added**: 1.3.0
- **Contrast**: needs a light backdrop on dark backgrounds

## Files

Each file is one variant of this logo. The component name is derived from the file name.

| File | Component | Color SVG | Monochrome SVG | Font class |
| --- | --- | --- | --- | --- |
| `home-assistant-icon` | `HomeAssistantIcon` | https://devicons.io/devicons/icons/home-assistant-icon.svg | https://devicons.io/devicons/font/home-assistant-icon.svg | `devicons devicons-home-assistant-icon` |
| `home-assistant` | `HomeAssistant` | https://devicons.io/devicons/icons/home-assistant.svg | https://devicons.io/devicons/font/home-assistant.svg | `devicons devicons-home-assistant` |

## Install and use

```bash
npm install @dev.icons/react  # or @dev.icons/vue, @dev.icons/svelte
```

### React

```tsx
import { HomeAssistantIcon } from "@dev.icons/react";
// Monochrome (inherits currentColor):
// import { HomeAssistantIcon } from "@dev.icons/react/mono";

<HomeAssistantIcon size={32} alt="Home Assistant logo" />
```

### Vue

```vue
<script setup>
import { HomeAssistantIcon } from "@dev.icons/vue";
</script>

<template>
  <HomeAssistantIcon :size="32" alt="Home Assistant logo" />
</template>
```

### Svelte

```svelte
<script>
  import { HomeAssistantIcon } from "@dev.icons/svelte";
</script>

<HomeAssistantIcon size={32} alt="Home Assistant logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/home-assistant-icon.svg" alt="Home Assistant logo" width="48" height="48" />
```

### Icon font

```css
@import "devicons/css"; /* npm install devicons */
```

```html
<i class="devicons devicons-home-assistant-icon"></i>
```

## About the Home Assistant logo

The Home Assistant logo is a light blue (#18BCF2) house shape with a white, circuit-like tree inside it: a trunk that splits into three branches ending in circles. A light grey (#F2F4F9) fill behind the tree keeps it visible on dark backgrounds. The lockup adds "Home Assistant" in near-black (#1D2126).

The icon reads well on light and dark backgrounds. The dark wordmark disappears on dark surfaces, so use the monochrome lockup there.

## When to use this logo

Use Home Assistant in smart home dashboards, homelab diagrams, IoT integration docs and self-hosting guides. It pairs naturally with Raspberry Pi, MQTT, Node-RED, Docker and Google Home.

## Related icons

- [Matter](/icons/matter.md)
- [Arduino](/icons/arduino.md)
- [GoCD](/icons/gocd.md)
- [Google Home](/icons/google-home.md)
- [goose](/icons/goose.md)
- [Mautic](/icons/mautic.md)
- [n8n](/icons/n8n.md)
- [Open WebUI](/icons/open-webui.md)

## Browse the catalog
- Previous: [Hipercard](/icons/hipercard.md)
- Next: [Homebrew](/icons/homebrew.md)
- [All icons](/icons.md)