---
title: "High score animated icon"
description: "High score animated icon (Gamification & rewards). A new record is set. Light: the 1 is written on the display, flag stroke first, then its foot, and the crown jumps 2.1 units off the display with a tilt and lands back with a hit and one small bounce. Strong: the crown jumps higher (2.2), twirls one way then the other and lands with two decaying bounces. The crown only rises, so its gap above the display never closes, and the display never moves."
canonical: https://generativeicons.com/icons/high-score/
---

# High score animated icon

A new record is set. Light: the 1 is written on the display, flag stroke first, then its foot, and the crown jumps 2.1 units off the display with a tilt and lands back with a hit and one small bounce. Strong: the crown jumps higher (2.2), twirls one way then the other and lands with two decaying bounces. The crown only rises, so its gap above the display never closes, and the display never moves.

- Id: `high-score`
- Category: Gamification & rewards
- Search terms: best score, top score, new record, personal best, pb, number one, hi score, highscore, high scores, all time best, best result
- One action, back to rest
- 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/high-score.lottie (dotLottie, 3844 bytes, sha256 eafbcdd73b39a2e887a9b3f25e8266928c80e03cd02cae546ddc3e6b8f855def)
- License: MIT

## Install

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

## React

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

export function HighScoreIcon() {
  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/high-score.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/high-score/ · https://generativeicons.com/api/icons/high-score