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

# DocSearch

DocSearch is Algolia's free search service for technical documentation sites, combining the Algolia Crawler with an open-source search UI and Ask AI.

## At a glance

- **Page**: https://devicons.io/icons/algolia-docsearch/
- **Website**: https://docsearch.algolia.com/
- **Also known as**: Algolia DocSearch, DocSearch by Algolia
- **Tags**: [Search](/icons/tag/search/), [Developer Tools](/icons/tag/developer-tools/), [Open Source](/icons/tag/open-source/), [API](/icons/tag/api/)
- **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 |
| --- | --- | --- | --- | --- |
| `algolia-docsearch-icon` | `AlgoliaDocsearchIcon` | https://devicons.io/devicons/icons/algolia-docsearch-icon.svg | https://devicons.io/devicons/font/algolia-docsearch-icon.svg | `devicons devicons-algolia-docsearch-icon` |
| `algolia-docsearch` | `AlgoliaDocsearch` | https://devicons.io/devicons/icons/algolia-docsearch.svg | https://devicons.io/devicons/font/algolia-docsearch.svg | `devicons devicons-algolia-docsearch` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the DocSearch logo

The DocSearch symbol is an outlined capital "D" filled with horizontal lines of different lengths, like lines of text on a page. The full logo pairs the symbol with an uppercase "DOCSEARCH" wordmark. The symbol comes from the favicon and header of docsearch.algolia.com. The full logo comes from the DocSearch logo file in the project's official GitHub repository.

The symbol is blue-violet (#5468FF). In the full logo, the inner lines and the wordmark are black, so they disappear on dark backgrounds. Use the monochrome version, or the all-blue symbol, in dark themes.

## When to use this logo

Use the DocSearch logo in documentation tooling comparisons, "search by" credits in docs footers, static site generator plugin lists, and setup guides for Docusaurus, VitePress or other docs frameworks. It pairs naturally with Algolia, Docusaurus, VitePress, Starlight, Mintlify, Typesense and Meilisearch.

## Related icons

- [Algolia](/icons/algolia.md)
- [Meilisearch](/icons/meilisearch.md)
- [Altair](/icons/altair.md)
- [Appwrite](/icons/appwrite.md)
- [Datasette](/icons/datasette.md)
- [Fish Audio](/icons/fish-audio.md)
- [Google AI Studio](/icons/google-ai-studio.md)
- [Google Developers](/icons/google-developers.md)

## Browse the catalog
- Previous: [Docker](/icons/docker.md)
- Next: [Doctrine](/icons/doctrine.md)
- [All icons](/icons.md)