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

# Remotion

Remotion is a framework for creating videos programmatically with React, rendering compositions to MP4 locally, on a server or in the cloud with Remotion Lambda.

## At a glance

- **Page**: https://devicons.io/icons/remotion/
- **Website**: https://www.remotion.dev/
- **Also known as**: Remotion Lambda, remotion.dev
- **Tags**: [React](/icons/tag/react/), [Video](/icons/tag/video/), [Framework](/icons/tag/framework/), [JavaScript](/icons/tag/javascript/), [TypeScript](/icons/tag/typescript/)
- **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 |
| --- | --- | --- | --- | --- |
| `remotion` | `Remotion` | https://devicons.io/devicons/icons/remotion.svg | https://devicons.io/devicons/font/remotion.svg | `devicons devicons-remotion` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/remotion.svg" alt="Remotion logo" width="48" height="48" />
```

### Icon font

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

```html
<i class="devicons devicons-remotion"></i>
```

## About the Remotion logo

The Remotion logo is a blue (#0B84F3) play button with rounded corners. It sits inside two larger copies of the same shape at lower opacity, which gives it a soft, layered glow.

The blue logo reads well on light and dark backgrounds.

## When to use this logo

Use Remotion in video generation tool comparisons, React ecosystem roundups and programmatic video tutorials. It pairs naturally with React, Next.js, FFmpeg and OBS Studio.

## Related icons

- [TanStack](/icons/tanstack.md)
- [Angular](/icons/angular.md)
- [RedwoodJS](/icons/redwoodjs.md)
- [Remix](/icons/remix.md)
- [LangChain](/icons/langchain.md)
- [Next.js](/icons/nextjs.md)
- [Svelte](/icons/svelte.md)
- [Vitest](/icons/vitest.md)

## Browse the catalog
- Previous: [Remix](/icons/remix.md)
- Next: [Renovate](/icons/renovatebot.md)
- [All icons](/icons.md)