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

# Directus

Directus is an open-source backend and headless CMS that wraps any SQL database with instant REST and GraphQL APIs and a no-code Data Studio.

## At a glance

- **Page**: https://devicons.io/icons/directus/
- **Website**: https://directus.com/
- **Also known as**: Directus CMS, Directus Cloud, Directus Data Studio
- **Tags**: [CMS](/icons/tag/cms/), [Headless CMS](/icons/tag/headless-cms/), [Database](/icons/tag/database/), [API](/icons/tag/api/), [Open Source](/icons/tag/open-source/)
- **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 |
| --- | --- | --- | --- | --- |
| `directus` | `Directus` | https://devicons.io/devicons/icons/directus.svg | https://devicons.io/devicons/font/directus.svg | `devicons devicons-directus` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the Directus logo

The Directus icon is a white rabbit in mid-leap on a square tile of layered purple waves, which shade from Directus purple (#6644FF) to lighter violet (#B36EEE). Directus also uses the rabbit on its own, in white, in its site header.

The purple tile reads well on light and dark backgrounds.

## When to use this logo

Use Directus in headless CMS comparisons, Jamstack and backend-as-a-service stack diagrams, self-hosting guides and docs for the Directus SDK, REST or GraphQL APIs. It pairs naturally with Strapi, Payload, PostgreSQL, Nuxt and Next.js.

## Related icons

- [Apostrophe](/icons/apostrophe.md)
- [Appwrite](/icons/appwrite.md)
- [Contentful](/icons/contentful.md)
- [Datasette](/icons/datasette.md)
- [DatoCMS](/icons/datocms.md)
- [Payload](/icons/payload.md)
- [Strapi](/icons/strapi.md)
- [Clickhouse](/icons/clickhouse.md)

## Browse the catalog
- Previous: [Diners Club](/icons/dinersclub.md)
- Next: [Discord](/icons/discord.md)
- [All icons](/icons.md)