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

# OpenRouter

OpenRouter is a unified API for large language models that routes requests across 400+ models from providers such as OpenAI, Anthropic and Meta.

## At a glance

- **Page**: https://devicons.io/icons/openrouter/
- **Website**: https://openrouter.ai/
- **License**: https://openrouter.ai/terms
- **Brand guidelines**: https://openrouter.ai/brand
- **Also known as**: Open Router
- **Tags**: [AI](/icons/tag/ai/), [LLM](/icons/tag/llm/), [API](/icons/tag/api/), [Inference](/icons/tag/inference/), [Infrastructure](/icons/tag/infrastructure/)
- **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 |
| --- | --- | --- | --- | --- |
| `openrouter-icon` | `OpenrouterIcon` | https://devicons.io/devicons/icons/openrouter-icon.svg | https://devicons.io/devicons/font/openrouter-icon.svg | `devicons devicons-openrouter-icon` |
| `openrouter` | `Openrouter` | https://devicons.io/devicons/icons/openrouter.svg | https://devicons.io/devicons/font/openrouter.svg | `devicons devicons-openrouter` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the OpenRouter logo

The OpenRouter glyph is a single rounded shape: a ring for the "O" whose body runs into a diagonal tail on the right, so it reads as "OR". The official brand page lists four colorways: Grape (#7624F4) and Ink (#03080A) for light backgrounds, and Volt (#C8FF00) and Cloud for dark ones. The primary horizontal lockup pairs the Grape glyph with a lowercase "openrouter" wordmark in Ink.

The Grape glyph works on both light and dark backgrounds. The Ink wordmark does not work on dark backgrounds, so use the monochrome version there. OpenRouter asks that the marks not be stretched, recolored or remixed.

## When to use this logo

Use OpenRouter in LLM provider pickers, model routing and gateway architecture diagrams, and docs for SDKs or coding tools that accept an OpenRouter API key. It also fits pricing and latency comparison tables. It pairs naturally with OpenAI, Anthropic, Google Gemini, Meta Llama and other model providers, and with LiteLLM or Vercel AI SDK in a gateway stack.

## Related icons

- [Fireworks AI](/icons/fireworks.md)
- [vLLM](/icons/vllm.md)
- [OpenAI](/icons/openai.md)
- [Baidu AI Cloud](/icons/baidu-cloud.md)
- [Cohere](/icons/cohere.md)
- [Google AI Studio](/icons/google-ai-studio.md)
- [Groq](/icons/groq.md)
- [iFLYTEK Open Platform](/icons/iflytek-cloud.md)

## Browse the catalog
- Previous: [OpenLayers](/icons/openlayers.md)
- Next: [OpenSearch](/icons/opensearch.md)
- [All icons](/icons.md)