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

# Bitwarden

Bitwarden is an open-source password manager for individuals and businesses, with end-to-end encrypted vaults, passkeys, a Secrets Manager, a CLI and self-hosting.

## At a glance

- **Page**: https://devicons.io/icons/bitwarden/
- **Website**: https://bitwarden.com/
- **Brand guidelines**: https://bitwarden.com/brand/
- **Also known as**: Bitwarden Password Manager, Bitwarden Secrets Manager, Bitwarden Send, Bitwarden CLI
- **Tags**: [Security](/icons/tag/security/), [Password Manager](/icons/tag/password-manager/), [Open Source](/icons/tag/open-source/), [Authentication](/icons/tag/authentication/), [Encryption](/icons/tag/encryption/)
- **Version added**: 1.3.0

## 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 |
| --- | --- | --- | --- | --- |
| `bitwarden-icon` | `BitwardenIcon` | https://devicons.io/devicons/icons/bitwarden-icon.svg | https://devicons.io/devicons/font/bitwarden-icon.svg | `devicons devicons-bitwarden-icon` |
| `bitwarden` | `Bitwarden` | https://devicons.io/devicons/icons/bitwarden.svg | https://devicons.io/devicons/font/bitwarden.svg | `devicons devicons-bitwarden` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/bitwarden-icon.svg" alt="Bitwarden logo" width="48" height="48" />
```

### Icon font

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

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

## About the Bitwarden logo

The Bitwarden icon is a shield in Bitwarden Blue (#175DDC) with a solid left half and an open right half, so the background shows through. The lockup sets "bitwarden" in the same blue next to the shield, with "bit" in bold and "warden" in a lighter weight. Both come from Bitwarden's official logo kit.

The blue reads well on light backgrounds and stays visible on dark ones, though the thin wordmark is easier to read in monochrome white there.

## When to use this logo

Use Bitwarden in password manager comparisons, security and SSO setup guides, self-hosting stacks and docs for the Bitwarden CLI or Secrets Manager SDKs. It pairs naturally with Okta, Auth0, Vault, Proton Mail and Docker.

## Related icons

- [GnuPG](/icons/gnupg.md)
- [Passbolt](/icons/passbolt.md)
- [Supertokens](/icons/supertokens.md)
- [Clerk](/icons/clerk.md)
- [Appwrite](/icons/appwrite.md)
- [Auth0](/icons/auth0.md)
- [Authy](/icons/authy.md)
- [Brave](/icons/brave.md)

## Browse the catalog
- Previous: [Bitrise](/icons/bitrise.md)
- Next: [Blender](/icons/blender.md)
- [All icons](/icons.md)