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

# Hoppscotch

Hoppscotch is an open-source API development platform for testing REST, GraphQL and WebSocket APIs in the browser, on desktop or self-hosted, as a light Postman alternative.

## At a glance

- **Page**: https://devicons.io/icons/hoppscotch/
- **Website**: https://hoppscotch.com/
- **Also known as**: Hoppscotch.io, Postwoman, Hoppscotch CLI
- **Tags**: [API](/icons/tag/api/), [Testing](/icons/tag/testing/), [Open Source](/icons/tag/open-source/), [Developer Tools](/icons/tag/developer-tools/), [GraphQL](/icons/tag/graphql/)
- **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 |
| --- | --- | --- | --- | --- |
| `hoppscotch` | `Hoppscotch` | https://devicons.io/devicons/icons/hoppscotch.svg | https://devicons.io/devicons/font/hoppscotch.svg | `devicons devicons-hoppscotch` |

## Install and use

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

### React

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

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

### Vue

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

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

### Svelte

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

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

### Raw SVG

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

### Icon font

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

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

## About the Hoppscotch logo

The Hoppscotch logo is a mint-green planet with a tilted ring and three round dots on its surface, shaded with gradients from bright mint (#00D196) to green (#00B381). The project launched in 2019 as Postwoman before taking the Hoppscotch name.

The green logo reads well on light and dark backgrounds.

## When to use this logo

Use Hoppscotch in API client comparisons, developer tool stacks, API docs with "try it" links and self-hosting guides. It pairs naturally with Postman, Insomnia, Bruno, Swagger and GraphQL.

## Related icons

- [Altair](/icons/altair.md)
- [DocSearch](/icons/algolia-docsearch.md)
- [Insomnia](/icons/insomnia.md)
- [Postman](/icons/postman.md)
- [Stoplight](/icons/stoplight.md)
- [Apiary](/icons/apiary.md)
- [Apollo](/icons/apollo.md)
- [Appwrite](/icons/appwrite.md)

## Browse the catalog
- Previous: [Hootsuite](/icons/hootsuite.md)
- Next: [Hosted Graphite](/icons/hosted-graphite.md)
- [All icons](/icons.md)