Shield Icon — Free SVG Component

The Shield icon is a free, open-source SVG icon component built with TypeScript for React, Next.js, Vue, Remix, Svelte, and Astro projects. No npm install or package dependency required — just copy the component code and paste it into your project.

How to use Shield icon in React

Import the Shield component from your icons folder. Use it as a standard React component with props: size (number), color (string), className (string), and all standard SVG attributes via spread props.

Example: <Shield size={24} color="currentColor" className="shrink-0" />

Features

• Zero dependencies — no package install needed
• TypeScript ready with full type safety
• Fully customizable size, color, and className
• Works with Tailwind CSS, styled-components, CSS modules
• Accessible — supports aria attributes
• Tree-shakeable — only import what you use
• MIT licensed — free for commercial use

Compatible frameworks

React, Next.js (App Router & Pages Router), Vue, Remix, Svelte, Astro, Nuxt, Gatsby, Vite, Angular, Qwik.

Category: elements

Browse more elements icons in the Next Icons library. All icons are hand-crafted SVGs optimized for web performance.