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

# OBS Studio

OBS Studio (Open Broadcaster Software) is a free, open-source app for screen recording and live streaming to Twitch, YouTube and more on Windows, macOS and Linux.

## At a glance

- **Page**: https://devicons.io/icons/obs-studio/
- **Website**: https://obsproject.com/
- **Also known as**: OBS, Open Broadcaster Software, obs-studio
- **Tags**: [Streaming](/icons/tag/streaming/), [Video](/icons/tag/video/), [Open Source](/icons/tag/open-source/), [Live Streaming](/icons/tag/live-streaming/)
- **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 |
| --- | --- | --- | --- | --- |
| `obs-studio` | `ObsStudio` | https://devicons.io/devicons/icons/obs-studio.svg | https://devicons.io/devicons/font/obs-studio.svg | `devicons devicons-obs-studio` |

## Install and use

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

### React

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

<ObsStudio size={32} alt="OBS Studio logo" />
```

### Vue

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

<template>
  <ObsStudio :size="32" alt="OBS Studio logo" />
</template>
```

### Svelte

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

<ObsStudio size={32} alt="OBS Studio logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/obs-studio.svg" alt="OBS Studio logo" width="48" height="48" />
```

### Icon font

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

```html
<i class="devicons devicons-obs-studio"></i>
```

## About the OBS Studio logo

The OBS logo is a dark charcoal (#302E31) circle with three light grey (#C4C2C4) comma-shaped swirls turning around the centre, like a camera aperture. A thin white ring around the circle separates it from dark backgrounds.

The logo reads well on light and dark backgrounds.

## When to use this logo

Use OBS Studio in streaming setup guides, screen recording tool comparisons, creator stack slides and OBS plugin docs. It pairs naturally with Twitch, YouTube, Discord and Remotion.

## Related icons

- [ComfyUI](/icons/comfyui.md)
- [Risingwave](/icons/risingwave.md)
- [Vimeo](/icons/vimeo.md)
- [WebTorrent](/icons/webtorrent.md)
- [YouTube](/icons/youtube.md)
- [Clickhouse](/icons/clickhouse.md)
- [DeepSeek](/icons/deepseek.md)
- [Firefox](/icons/firefox.md)

## Browse the catalog
- Previous: [OAuth](/icons/oauth.md)
- Next: [Observable](/icons/observablehq.md)
- [All icons](/icons.md)