---
title: "Quest animated icon"
description: "Quest animated icon (Gamification & rewards). The quest goal is reached. Light: the marker crouches, leaps across the map from the lower-left start to the upper-right goal while the route is traced on the map beneath it, lands with a squash and stays; the route fades once it has arrived. Strong: the marker reaches the goal in two hops, stopping at the halfway point, the route tracing in two legs, and lands harder. Reverse: the route reappears and the marker hops back to the start along it (twice in Strong) as it retracts, landing with a squash."
canonical: https://generativeicons.com/icons/quest/
---

# Quest animated icon

The quest goal is reached. Light: the marker crouches, leaps across the map from the lower-left start to the upper-right goal while the route is traced on the map beneath it, lands with a squash and stays; the route fades once it has arrived. Strong: the marker reaches the goal in two hops, stopping at the halfway point, the route tracing in two legs, and lands harder. Reverse: the route reappears and the marker hops back to the start along it (twice in Strong) as it retracts, landing with a squash.

- Id: `quest`
- Category: Gamification & rewards
- Search terms: mission, missions, adventure, journey, objective, objectives, challenge, treasure map, campaign, rpg, expedition
- Two states: started to reached, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/quest.lottie (dotLottie, 8635 bytes, sha256 5bd46079b72441c23aef4b044848ba8daa6a56f2af45c4f7d08873d338a03194)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add quest
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/quest.mjs';

export function QuestIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/quest.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/quest/ · https://generativeicons.com/api/icons/quest