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

# Matrix

Matrix is an open standard and protocol for decentralised, end-to-end encrypted chat, voice and video, run by the Matrix.org Foundation, with Element and Synapse.

## At a glance

- **Page**: https://devicons.io/icons/matrix/
- **Website**: https://matrix.org/
- **Also known as**: Matrix.org, Matrix protocol, [matrix], Matrix chat
- **Tags**: [Chat](/icons/tag/chat/), [Protocol](/icons/tag/protocol/), [Open Source](/icons/tag/open-source/), [Encryption](/icons/tag/encryption/), [Decentralized](/icons/tag/decentralized/)
- **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 |
| --- | --- | --- | --- | --- |
| `matrix` | `Matrix` | https://devicons.io/devicons/icons/matrix.svg | https://devicons.io/devicons/font/matrix.svg | `devicons devicons-matrix` |

## Install and use

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

### React

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

<Matrix size={32} alt="Matrix logo" />
```

### Vue

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

<template>
  <Matrix :size="32" alt="Matrix logo" />
</template>
```

### Svelte

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

<Matrix size={32} alt="Matrix logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/matrix.svg" alt="Matrix logo" width="48" height="48" />
```

### Icon font

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

```html
<i class="devicons devicons-matrix"></i>
```

## About the Matrix logo

The Matrix logo is a black lowercase "m" between a pair of tall square brackets, written as [matrix] in text.

The black mark disappears on dark surfaces, so use the monochrome version there.

## When to use this logo

Use Matrix in chat platform and protocol comparisons, self-hosted communication stacks, bridge diagrams and docs for Matrix bots, the Client-Server API or homeservers. It pairs naturally with Element, Discord, Slack, Mastodon and Signal.

## Related icons

- [Bitwarden](/icons/bitwarden.md)
- [GNUnet](/icons/gnu-net.md)
- [GnuPG](/icons/gnupg.md)
- [Mastodon](/icons/mastodon.md)
- [Matter](/icons/matter.md)
- [MCP](/icons/mcp.md)
- [Rocket-chat](/icons/rocket-chat.md)
- [Signal](/icons/signal.md)

## Browse the catalog
- Previous: [Matomo](/icons/matomo.md)
- Next: [Matter](/icons/matter.md)
- [All icons](/icons.md)