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

# Kagi

Kagi is a paid, ad-free search engine from Kagi Inc. that also offers Kagi Assistant, a private way to use multiple LLMs grounded in Kagi search results.

## At a glance

- **Page**: https://devicons.io/icons/kagi/
- **Website**: https://kagi.com/
- **Brand guidelines**: https://kagi.com/press
- **Also known as**: Kagi Search, Kagi Assistant, Kagi Inc.
- **Tags**: [AI](/icons/tag/ai/), [LLM](/icons/tag/llm/), [Productivity](/icons/tag/productivity/), [Privacy](/icons/tag/privacy/), [Search](/icons/tag/search/)
- **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 |
| --- | --- | --- | --- | --- |
| `kagi-icon` | `KagiIcon` | https://devicons.io/devicons/icons/kagi-icon.svg | https://devicons.io/devicons/font/kagi-icon.svg | `devicons devicons-kagi-icon` |
| `kagi` | `Kagi` | https://devicons.io/devicons/icons/kagi.svg | https://devicons.io/devicons/font/kagi.svg | `devicons devicons-kagi` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the Kagi logo

Kagi's brand guide names two assets. The main logotype is a lowercase "kagi" wordmark with a looping, tailed "g". The main symbol is that "g" alone in graphite on a yellow rounded square, used where the full logotype does not fit. Both files here come from the official Kagi Media Kit 2026. The name comes from the Japanese word 鍵 (kagi), meaning "key".

The main brand colors are yellow (#FFB319), graphite (#18181A) and white. The graphite wordmark disappears on dark backgrounds; the brand guide shows a white "negative" version for those, which the monochrome file covers.

## When to use this logo

Use the Kagi logo in search engine comparisons, privacy-focused tool lists, browser search-provider settings, and AI assistant or LLM provider pickers that include Kagi Assistant. It also fits developer docs that call the Kagi API, and "search with" menus in browsers and launchers. Natural pairings are DuckDuckGo, Brave Search, Perplexity and the Orion browser.

## Related icons

- [Gemini Notebook](/icons/google-notebooklm.md)
- [Monica](/icons/monica.md)
- [Perplexity](/icons/perplexity.md)
- [Poe](/icons/poe.md)
- [Venice](/icons/venice.md)
- [Claude](/icons/claude.md)
- [DeepSeek](/icons/deepseek.md)
- [Google Gemini](/icons/google-gemini.md)

## Browse the catalog
- Previous: [Kafka](/icons/kafka.md)
- Next: [KaiOS](/icons/kaios.md)
- [All icons](/icons.md)