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

# Luma

Luma is a generative AI company, also known as Luma AI, behind the Ray video models, the Uni image models and Luma Agents for creative production work.

## At a glance

- **Page**: https://devicons.io/icons/luma/
- **Website**: https://lumalabs.ai/
- **License**: https://lumalabs.ai/legal/terms-of-service
- **Brand guidelines**: https://lumalabs.ai/media-kit
- **Also known as**: Luma AI, Luma Labs, Luma Ray, Luma Uni
- **Tags**: [AI](/icons/tag/ai/), [Video](/icons/tag/video/), [Image Generation](/icons/tag/image-generation/), [Generative AI](/icons/tag/generative-ai/), [Agents](/icons/tag/agents/)
- **Version added**: 1.2.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 |
| --- | --- | --- | --- | --- |
| `luma-icon` | `LumaIcon` | https://devicons.io/devicons/icons/luma-icon.svg | https://devicons.io/devicons/font/luma-icon.svg | `devicons devicons-luma-icon` |
| `luma` | `Luma` | https://devicons.io/devicons/icons/luma.svg | https://devicons.io/devicons/font/luma.svg | `devicons devicons-luma` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the Luma logo

The Luma symbol is two flat planes that meet at a fold: a tall parallelogram, and below it a diamond. Both are set at 65% opacity, so the area where they overlap reads darker, like a folded sheet. The full logo puts the symbol next to a bold "Luma" wordmark set in Graphik. Both files come from the official SVGs in Luma's media kit, and they match the logo on lumalabs.ai.

Luma's 2026 brand guidelines allow the logo only in black or white, with no gradients and no changes to the symbol's opacity. The color files are the black versions, so use the monochrome version on dark backgrounds. In the monochrome version, thin gaps between the three faces stand in for the opacity layering.

## When to use this logo

Use the Luma logo in AI video model comparisons, generative media stack diagrams, model pickers for apps that call the Luma API, and docs or tutorials about Ray video generation, Uni images or Luma Agents. It pairs naturally with Runway, Pika, Kling, Google Veo and OpenAI Sora in video generation lineups.

## Related icons

- [Dream Machine](/icons/luma-dream-machine.md)
- [Pika](/icons/pika.md)
- [Adobe Firefly](/icons/adobe-firefly.md)
- [ComfyUI](/icons/comfyui.md)
- [DeepAI](/icons/deepai.md)
- [Hailuo AI](/icons/hailuo.md)
- [Ideogram](/icons/ideogram.md)
- [Kling AI](/icons/kling.md)

## Browse the catalog
- Previous: [Lucene.net](/icons/lucene-net.md)
- Next: [macOS](/icons/macos.md)
- [All icons](/icons.md)