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

# Zen Browser

Zen Browser is an open-source, Firefox-based web browser focused on calm browsing, with vertical tabs, split view, workspaces and a compact mode.

## At a glance

- **Page**: https://devicons.io/icons/zen-browser/
- **Website**: https://zen-browser.app/
- **Also known as**: Zen, Zen Browser Firefox
- **Tags**: [Browser](/icons/tag/browser/), [Firefox](/icons/tag/firefox/), [Open Source](/icons/tag/open-source/), [Privacy](/icons/tag/privacy/)
- **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 |
| --- | --- | --- | --- | --- |
| `zen-browser-icon` | `ZenBrowserIcon` | https://devicons.io/devicons/icons/zen-browser-icon.svg | https://devicons.io/devicons/font/zen-browser-icon.svg | `devicons devicons-zen-browser-icon` |
| `zen-browser` | `ZenBrowser` | https://devicons.io/devicons/icons/zen-browser.svg | https://devicons.io/devicons/font/zen-browser.svg | `devicons devicons-zen-browser` |

## Install and use

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

### React

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

<ZenBrowserIcon size={32} alt="Zen Browser logo" />
```

### Vue

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

<template>
  <ZenBrowserIcon :size="32" alt="Zen Browser logo" />
</template>
```

### Svelte

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

<ZenBrowserIcon size={32} alt="Zen Browser logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/zen-browser-icon.svg" alt="Zen Browser logo" width="48" height="48" />
```

### Icon font

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

```html
<i class="devicons devicons-zen-browser-icon"></i>
```

## About the Zen Browser logo

The Zen Browser icon is three concentric rings in coral (#F76F53), thicker on the outside and thinner towards the centre, the same colour as the Zen website's favicon. The lockup pairs the rings with "zen browser" in lowercase, both in near-black (#202020).

The coral icon reads well on light and dark backgrounds. The near-black lockup disappears on dark surfaces, so use the icon or the monochrome lockup there.

## When to use this logo

Use Zen Browser in browser comparisons, privacy-focused setup guides, extension compatibility tables and dotfiles or desktop setup posts. It pairs naturally with Firefox, Arc, Brave, Chromium and Vivaldi.

## Related icons

- [Firefox](/icons/firefox.md)
- [Firefox Browser](/icons/firefox-browser.md)
- [Mozilla](/icons/mozilla.md)
- [Baseline](/icons/baseline.md)
- [Brave](/icons/brave.md)
- [Chromium](/icons/chromium.md)
- [Duckduckgo](/icons/duckduckgo.md)
- [GNUnet](/icons/gnu-net.md)

## Browse the catalog
- Previous: [Zed](/icons/zed.md)
- Next: [Zend Framework](/icons/zend-framework.md)
- [All icons](/icons.md)