---
title: "Cocktail animated icon"
description: "Cocktail animated icon (Food & Drink). Cheers: the glass is raised and clinks, and the drink takes the knock. Light: the glass lifts and tips toward the right while the drink stays level, stops dead at the clink, and the drink surges up the far wall and sloshes back once as the glass comes upright. Strong: the glass draws back first, swings in harder to the clink, recoils and clinks a second, smaller time; the drink surges higher and sloshes back and forth twice before it settles. The glass stays rigid. (There is no room for clink sparks: the tipped rim reaches within 3.4 of the right edge.)"
canonical: https://generativeicons.com/icons/cocktail/
---

# Cocktail animated icon

Cheers: the glass is raised and clinks, and the drink takes the knock. Light: the glass lifts and tips toward the right while the drink stays level, stops dead at the clink, and the drink surges up the far wall and sloshes back once as the glass comes upright. Strong: the glass draws back first, swings in harder to the clink, recoils and clinks a second, smaller time; the drink surges higher and sloshes back and forth twice before it settles. The glass stays rigid. (There is no room for clink sparks: the tipped rim reaches within 3.4 of the right edge.)

- Id: `cocktail`
- Category: Food & Drink
- Search terms: martini, margarita, mojito, mixed drink, mocktail, bartender, mixology, nightlife, lounge, happy hour, cheers, drinks
- 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/cocktail.lottie (dotLottie, 3995 bytes, sha256 e6ae3021f590f9beaf1eaa9f2af0e9872c8a6ffe648c8afed3f07806f0b573e6)
- License: MIT

## Install

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

## React

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

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