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

# CapCut

CapCut is a video editor developed by ByteDance, available as a mobile app, desktop app and web app, and known in China as JianYing (剪映).

## At a glance

- **Page**: https://devicons.io/icons/capcut/
- **Website**: https://www.capcut.com/
- **License**: https://www.capcut.com/clause/terms-of-service
- **Also known as**: JianYing, 剪映, ViaMaker
- **Tags**: [Video](/icons/tag/video/), [Editor](/icons/tag/editor/), [Social Media](/icons/tag/social-media/), [China](/icons/tag/china/)
- **Version added**: 1.2.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 |
| --- | --- | --- | --- | --- |
| `capcut-icon` | `CapcutIcon` | https://devicons.io/devicons/icons/capcut-icon.svg | https://devicons.io/devicons/font/capcut-icon.svg | `devicons devicons-capcut-icon` |
| `capcut` | `Capcut` | https://devicons.io/devicons/icons/capcut.svg | https://devicons.io/devicons/font/capcut.svg | `devicons devicons-capcut` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the CapCut logo

CapCut's mark is a geometric glyph: a rounded rectangle crossed by two diagonal bands that meet in the middle, forming an hourglass-like "cut" shape with a small tab extending to the right. On capcut.com the glyph sits to the left of the "CapCut" wordmark, set in a rounded geometric sans with the two capital Cs echoing each other.

The logo is single-color. capcut.com renders it in black on light surfaces, and the brand has no secondary accent color in the mark itself. The colored file here is black (#000000), so on dark interfaces use the mono version, which takes `currentColor`.

## When to use this logo

Use the CapCut logo in creator-tool roundups, short-form video workflow diagrams, app comparison tables and tutorials on editing for social platforms. Its natural neighbors are TikTok (also from ByteDance), Adobe Premiere Pro, DaVinci Resolve and Canva. The standalone glyph works well as a small app badge; switch to the full lockup when the name needs to be read.

## Related icons

- [Bilibili](/icons/bilibili.md)
- [ByteDance](/icons/bytedance.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: [Capacitor](/icons/capacitorjs.md)
- Next: [Capistrano](/icons/capistrano.md)
- [All icons](/icons.md)