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

# Calendly

Calendly is a scheduling automation platform for booking meetings without back-and-forth emails, with booking pages, routing, workflows and an API.

## At a glance

- **Page**: https://devicons.io/icons/calendly/
- **Website**: https://calendly.com/
- **Also known as**: Calendly API, Calendly Scheduling
- **Tags**: [Scheduling](/icons/tag/scheduling/), [Calendar](/icons/tag/calendar/), [Productivity](/icons/tag/productivity/), [SaaS](/icons/tag/saas/), [API](/icons/tag/api/)
- **Version added**: 1.3.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 |
| --- | --- | --- | --- | --- |
| `calendly-icon` | `CalendlyIcon` | https://devicons.io/devicons/icons/calendly-icon.svg | https://devicons.io/devicons/font/calendly-icon.svg | `devicons devicons-calendly-icon` |
| `calendly` | `Calendly` | https://devicons.io/devicons/icons/calendly.svg | https://devicons.io/devicons/font/calendly.svg | `devicons devicons-calendly` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the Calendly logo

The Calendly icon is a soft, rounded tile in a blue gradient (#6AB0FF to #4793EB) with a white ring and a white "C" inside it. The lockup adds "Calendly" in near-black (#0B0D0F) next to the tile. Both are taken from the current logo on calendly.com.

The blue tile reads well on light and dark backgrounds. The dark wordmark disappears on dark surfaces, so use the icon or the monochrome lockup there.

## When to use this logo

Use Calendly in scheduling tool comparisons, sales and recruiting stack diagrams, booking embed docs and integrations with the Calendly API or webhooks. It pairs naturally with Cal.com, Google Calendar, Zoom, HubSpot and Salesforce.

## Related icons

- [Cal.com](/icons/cal-com.md)
- [Google Calendar](/icons/google-calendar.md)
- [Zapier](/icons/zapier.md)
- [Algolia](/icons/algolia.md)
- [Asana](/icons/asana.md)
- [Canva](/icons/canva.md)
- [DeepL](/icons/deepl.md)
- [Elasticpath](/icons/elasticpath.md)

## Browse the catalog
- Previous: [Cal.com](/icons/cal-com.md)
- Next: [Calibre](/icons/calibre.md)
- [All icons](/icons.md)