[ [UI.75] Components ] Simple Icon

Simple Icon

> Renders SVG icons from the simple-icons package.

Import

[ [0x5B] IMPORT ]

1import { SimpleIcon } from "@/components/ui/simple-icon"
2import { siReact } from 'simple-icons'

Preview

[ [0x00] SIMPLE ICON ]

1import { siReact, siTypescript } from 'simple-icons';
2
3<SimpleIcon path={siReact.path} className="h-8 w-8" title="React" />
4<SimpleIcon path={siTypescript.path} className="h-8 w-8" title="TypeScript" />

Variants

[ [0x00] DEFAULT SIZE ]

1<SimpleIcon path={siReact.path} title="React" />

[ [0x00] CUSTOM SIZE ]

1<SimpleIcon path={siReact.path} className="h-12 w-12" title="React" />

[ [0x00] WITH COLOR ]

1<SimpleIcon path={siReact.path} className="h-8 w-8 text-primary" title="React" />

[ [0x00] DECORATIVE (NO TITLE) ]

1<SimpleIcon path={siReact.path} className="h-8 w-8" />

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
path	`string`	-	SVG path data from simple-icons package.
title	`string`	-	Accessible title for screen readers. If omitted, icon is decorative.
className	`string`	-	Additional CSS classes for sizing and color.

Accessibility

[ [0x58] A11Y ]

When title provided: role="img" with <title> element for screen readers
When no title: aria-hidden="true" hides decorative icons
Uses currentColor for flexible theming
Standard SVG viewBox (0 0 24 24) ensures consistent rendering

Installation

[ [0x5C] INSTALL SIMPLE-ICONS ]

npm install simple-icons

simple-icons provides 2800+ brand icons as SVG paths.

Usage

[ [0x03] IMPORT AND USE ]

import { SimpleIcon } from "@/components/ui/simple-icon";
import { siGithub, siTwitter, siLinkedin } from 'simple-icons';

// In your component
<div className="flex gap-4">
  <SimpleIcon path={siGithub.path} title="GitHub" />
  <SimpleIcon path={siTwitter.path} title="Twitter" />
  <SimpleIcon path={siLinkedin.path} title="LinkedIn" />
</div>

1import { siReact, siTypescript } from 'simple-icons';

3<SimpleIcon path={siReact.path} className="h-8 w-8" title="React" />

4<SimpleIcon path={siTypescript.path} className="h-8 w-8" title="TypeScript" />

Variants

[ [0x00] DEFAULT SIZE ]

1<SimpleIcon path={siReact.path} title="React" />

[ [0x00] CUSTOM SIZE ]

1<SimpleIcon path={siReact.path} className="h-12 w-12" title="React" />

[ [0x00] WITH COLOR ]

1<SimpleIcon path={siReact.path} className="h-8 w-8 text-primary" title="React" />

[ [0x00] DECORATIVE (NO TITLE) ]

1<SimpleIcon path={siReact.path} className="h-8 w-8" />

Prop

Type

Default

Description

path

string

SVG path data from simple-icons package.

title

string

Accessible title for screen readers. If omitted, icon is decorative.

className

string

Additional CSS classes for sizing and color.

Usage

[ [0x03] IMPORT AND USE ]

import { SimpleIcon } from "@/components/ui/simple-icon";
import { siGithub, siTwitter, siLinkedin } from 'simple-icons';

// In your component
<div className="flex gap-4">
  <SimpleIcon path={siGithub.path} title="GitHub" />
  <SimpleIcon path={siTwitter.path} title="Twitter" />
  <SimpleIcon path={siLinkedin.path} title="LinkedIn" />
</div>