---
title: "Shield animated icon"
description: "Shield animated icon (Interface). The shield leans in, takes the hit, and rings down through two damped corrections at its lower point. Strong redirects one incoming signal at the edge while the attached check stays stable."
canonical: https://generativeicons.com/icons/shield/
---

# Shield animated icon

The shield leans in, takes the hit, and rings down through two damped corrections at its lower point. Strong redirects one incoming signal at the edge while the attached check stays stable.

- Id: `shield`
- Category: Interface
- Search terms: security, secure, protection, protect, safe, safety, defense, guard, safeguard, insurance, warranty, shield check
- 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/shield.lottie (dotLottie, 7723 bytes, sha256 ea70b8f09b2bfa1a5747fd7f8b552bcb872b0791e18f6520755b3a7cb28a07c7)
- License: MIT

## Install

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

## React

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

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