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

# Cal.com

Cal.com is open-source scheduling infrastructure, a Calendly alternative you can self-host or embed, with booking pages, routing forms, APIs and Cal.com Atoms.

## At a glance

- **Page**: https://devicons.io/icons/cal-com/
- **Website**: https://cal.com/
- **Also known as**: Cal, Calcom, Calendso, Cal.com API
- **Tags**: [Scheduling](/icons/tag/scheduling/), [Calendar](/icons/tag/calendar/), [Open Source](/icons/tag/open-source/), [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 |
| --- | --- | --- | --- | --- |
| `cal-com` | `CalCom` | https://devicons.io/devicons/icons/cal-com.svg | https://devicons.io/devicons/font/cal-com.svg | `devicons devicons-cal-com` |

## Install and use

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

### React

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

<CalCom size={32} alt="Cal.com logo" />
```

### Vue

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

<template>
  <CalCom :size="32" alt="Cal.com logo" />
</template>
```

### Svelte

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

<CalCom size={32} alt="Cal.com logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/cal-com.svg" alt="Cal.com logo" width="48" height="48" />
```

### Icon font

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

```html
<i class="devicons devicons-cal-com"></i>
```

## About the Cal.com logo

The Cal.com logo is a wordmark: "Cal.com" in a bold geometric sans serif, set in near-black (#292929). The project was called Calendso before it took the Cal.com name in 2021.

The dark wordmark disappears on dark surfaces, so use the monochrome version there.

## When to use this logo

Use Cal.com in scheduling tool comparisons, self-hosted SaaS stacks, booking flow diagrams and docs for the Cal.com API, embeds or Atoms. It pairs naturally with Calendly, Google Calendar, Zoom, Next.js and Prisma.

## Related icons

- [Calendly](/icons/calendly.md)
- [Algolia](/icons/algolia.md)
- [Appwrite](/icons/appwrite.md)
- [Datasette](/icons/datasette.md)
- [Directus](/icons/directus.md)
- [DocSearch](/icons/algolia-docsearch.md)
- [Elasticpath](/icons/elasticpath.md)
- [Firecrawl](/icons/firecrawl.md)

## Browse the catalog
- Previous: [CakePHP](/icons/cakephp.md)
- Next: [Calendly](/icons/calendly.md)
- [All icons](/icons.md)