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

# ByteDance

ByteDance is a Chinese internet technology company behind TikTok, Douyin, CapCut and Toutiao that also builds the Doubao and Seed generative AI models.

## At a glance

- **Page**: https://devicons.io/icons/bytedance/
- **Website**: https://www.bytedance.com/
- **Also known as**: 字节跳动, Zijie Tiaodong, ByteDance Ltd.
- **Tags**: [Social Media](/icons/tag/social-media/), [Video](/icons/tag/video/), [AI](/icons/tag/ai/), [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 |
| --- | --- | --- | --- | --- |
| `bytedance-icon` | `BytedanceIcon` | https://devicons.io/devicons/icons/bytedance-icon.svg | https://devicons.io/devicons/font/bytedance-icon.svg | `devicons devicons-bytedance-icon` |
| `bytedance` | `Bytedance` | https://devicons.io/devicons/icons/bytedance.svg | https://devicons.io/devicons/font/bytedance.svg | `devicons devicons-bytedance` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the ByteDance logo

The ByteDance mark is four vertical bars of different heights, each with slanted ends. The full logo pairs the bars with a rounded sans-serif "ByteDance" wordmark, which is the version in the header of bytedance.com. A Chinese lockup with 字节跳动 also exists. Zhang Yiming and Liang Rubo founded the company in 2012.

From left to right, the bars are #325AB4, #3C8CFF, #00C8D2 and #78E6DC, and the wordmark is #325AB4. The palest bar has low contrast on white backgrounds, so use the monochrome version when contrast matters.

## When to use this logo

Use the ByteDance logo in company overviews, partner pages, and AI provider lists that cover ByteDance's Doubao and Seed models or the Volcano Engine and BytePlus cloud platforms. It also fits docs for TikTok, CapCut or Lark integrations where you want to name the parent company. It pairs naturally with Tencent, Alibaba and Baidu, and with TikTok and CapCut in product family diagrams.

## Related icons

- [Bilibili](/icons/bilibili.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: [Bunny.net](/icons/bunny-net.md)
- Next: [C](/icons/c.md)
- [All icons](/icons.md)