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

# Airbnb

Airbnb is an online marketplace for short-term stays and experiences, connecting guests with hosts who rent out homes, rooms and unique places to stay.

## At a glance

- **Page**: https://devicons.io/icons/airbnb/
- **Website**: https://www.airbnb.com/
- **Also known as**: Air Bed and Breakfast, airbnb.com, Bélo
- **Tags**: [Travel](/icons/tag/travel/), [Marketplace](/icons/tag/marketplace/), [Booking](/icons/tag/booking/)
- **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 |
| --- | --- | --- | --- | --- |
| `airbnb-icon` | `AirbnbIcon` | https://devicons.io/devicons/icons/airbnb-icon.svg | https://devicons.io/devicons/font/airbnb-icon.svg | `devicons devicons-airbnb-icon` |
| `airbnb` | `Airbnb` | https://devicons.io/devicons/icons/airbnb.svg | https://devicons.io/devicons/font/airbnb.svg | `devicons devicons-airbnb` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the Airbnb logo

The Airbnb symbol is the Bélo, a single looping line that combines a location pin, a heart and an upside-down "A". Airbnb introduced it in its 2014 rebrand. The symbol and the lowercase "airbnb" wordmark use the brand's coral red (#FF5A5F), which Airbnb calls Rausch. The lockup sets the Bélo next to the wordmark.

The coral red reads well on light and dark backgrounds.

## When to use this logo

Use Airbnb in travel app comparisons, vacation rental and property management tooling, booking flow designs and partner logo rows. It pairs naturally with Uber, Google Maps, Stripe and Booking.com. Use the Bélo on its own for app grids and small UI slots.

## Related icons

- [GetYourGuide](/icons/getyourguide.md)
- [AliExpress](/icons/aliexpress.md)
- [Chrome Web Store](/icons/chrome-web-store.md)
- [eBay](/icons/ebay.md)
- [Envato](/icons/envato.md)
- [Mercado Libre](/icons/mercado-libre.md)
- [Udemy](/icons/udemy.md)

## Browse the catalog
- Previous: [Aha!](/icons/aha.md)
- Next: [Airbrake](/icons/airbrake.md)
- [All icons](/icons.md)