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

# Babel

Babel is the JavaScript compiler that transforms modern JavaScript, TypeScript and JSX into code that runs in older browsers and environments, with plugins and presets.

## At a glance

- **Page**: https://devicons.io/icons/babel/
- **Website**: https://babeljs.io/
- **Also known as**: Babel.js, BabelJS, @babel/core, 6to5
- **Tags**: [JavaScript](/icons/tag/javascript/), [Compiler](/icons/tag/compiler/), [Transpiler](/icons/tag/transpiler/), [Build Tools](/icons/tag/build-tools/), [Open Source](/icons/tag/open-source/)
- **Version added**: 1.3.0
- **Contrast**: needs a dark backdrop on light 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 |
| --- | --- | --- | --- | --- |
| `babel` | `Babel` | https://devicons.io/devicons/icons/babel.svg | https://devicons.io/devicons/font/babel.svg | `devicons devicons-babel` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the Babel logo

The Babel logo is the word "BABEL" in yellow (#F9DC3E) hand-brushed capitals, with rough edges and drips like paint strokes. The project launched in 2014 as 6to5 and was renamed Babel in 2015.

The yellow letters have little contrast on white, so place the logo on a dark background or use the monochrome version on light ones.

## When to use this logo

Use Babel in JavaScript build pipeline diagrams, transpiler and bundler comparisons, browser support docs and babel.config.js or .babelrc file icons. It pairs naturally with webpack, TypeScript, React, SWC and ESLint.

## Related icons

- [Svelte](/icons/svelte.md)
- [CLJS](/icons/cljs.md)
- [CoffeeScript](/icons/coffeescript.md)
- [Leaflet](/icons/leaflet.md)
- [Malina.js](/icons/malinajs.md)
- [Mermaid](/icons/mermaid.md)
- [OpenJS Foundation](/icons/openjs-foundation.md)
- [OpenLayers](/icons/openlayers.md)

## Browse the catalog
- Previous: [Aya](/icons/cohere-aya.md)
- Next: [Backbone](/icons/backbone.md)
- [All icons](/icons.md)