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

# Bilibili

Bilibili is a Chinese online video sharing platform based in Shanghai, known for anime, games and danmu comments overlaid on videos, nicknamed B站.

## At a glance

- **Page**: https://devicons.io/icons/bilibili/
- **Website**: https://www.bilibili.com/
- **Also known as**: 哔哩哔哩, B站, B Site, BSite, 嗶哩嗶哩
- **Tags**: [Video](/icons/tag/video/), [Social Media](/icons/tag/social-media/), [China](/icons/tag/china/)
- **Version added**: 1.2.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 |
| --- | --- | --- | --- | --- |
| `bilibili-icon` | `BilibiliIcon` | https://devicons.io/devicons/icons/bilibili-icon.svg | https://devicons.io/devicons/font/bilibili-icon.svg | `devicons devicons-bilibili-icon` |
| `bilibili` | `Bilibili` | https://devicons.io/devicons/icons/bilibili.svg | https://devicons.io/devicons/font/bilibili.svg | `devicons devicons-bilibili` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the Bilibili logo

Bilibili's primary logo is the hand-drawn, lowercase "bilibili" wordmark, which Wikipedia lists as in use since 2009. Its slanted, uneven strokes and triangular counters give it a doodled, playful feel that suits the platform's anime and gaming roots. The separate TV-set glyph, a rounded screen with two antennae and two eyes, is used across bilibili.com as the home icon and ships here as the standalone mark.

The wordmark uses Bilibili's brand blue (#00AEEC) and the TV glyph its brand pink (#FF6699). Both values come from bilibili.com's stylesheet, and both hold up on light and dark backgrounds.

## When to use this logo

Use the Bilibili logo in creator platform comparisons, social sharing button rows for Chinese audiences, video embed docs and marketing pages that list where content is published. It pairs naturally with YouTube, Douyin, Weibo and Xiaohongshu. The TV glyph is the better pick for compact share buttons. Use the wordmark when people need to recognize the brand by name.

## Related icons

- [ByteDance](/icons/bytedance.md)
- [CapCut](/icons/capcut.md)
- [Hailuo AI](/icons/hailuo.md)
- [Kling AI](/icons/kling.md)
- [MiniMax](/icons/minimax.md)
- [PixVerse](/icons/pixverse.md)
- [Qiniu Cloud](/icons/qiniu.md)
- [Tencent](/icons/tencent.md)

## Browse the catalog
- Previous: [BigPanda](/icons/bigpanda.md)
- Next: [Bing](/icons/bing.md)
- [All icons](/icons.md)