Icons & Illustration

Icons are the visual shorthand of interface design. The right icon set balances aesthetic coherence, file size, and framework compatibility. This collection focuses on open-source options with strong developer tooling.

---

Comparison

Library	Icons	Formats	Frameworks	License
React Icons	40,000+	SVG/JSX	React	Various
Iconoir	1,600+	SVG, JSX, Vue	React, RN, Flutter, Vue	MIT
css.gg	700+	CSS, SVG	Framework-agnostic	MIT
VS Code Icons	400+	SVG	Any	CC BY 4.0

---

Icon Libraries

React Icons

React Icons aggregates icons from popular sets into a single, searchable package.

import { FaGithub } from 'react-icons/fa';
import { IoMdSettings } from 'react-icons/io';

Included sets:

• Font Awesome, Material Design, Feather
• Heroicons, Phosphor, Tabler
• Bootstrap, Ant Design, and more

Tip: Tree-shaking ensures you only bundle icons you actually use.

---

Iconoir

Iconoir is a cohesive, hand-crafted set with consistent stroke widths and optical sizing.

Framework packages:

• iconoir-react / iconoir-react-native
• iconoir-vue
• iconoir-flutter

Also available as a Figma plugin for design workflows.

---

css.gg

css.gg takes an unusual approach: icons built entirely with CSS.

Benefits:

• No SVG parsing or image requests
• Easy color customization via currentColor
• Includes patterns, layouts, and spinners

Best for: Projects where you need a few simple icons without adding dependencies.

---

VS Code Icons

microsoft/vscode-icons provides the icon set used in Visual Studio Code.

Use cases:

• File type indicators in editors or file browsers
• Developer tool interfaces
• Documentation sites

---

Avatar Generation

DiceBear

DiceBear generates unique avatars from any seed string—perfect for user profiles before they upload a photo.

import { createAvatar } from '@dicebear/core';
import { lorelei } from '@dicebear/collection';

const avatar = createAvatar(lorelei, {
  seed: 'user@example.com',
});

Styles include:

• Abstract shapes (Identicon, Shapes)
• Illustrated characters (Lorelei, Adventurer, Bottts)
• Pixel art (8-bit, Pixel Art Neutral)

Output formats: SVG, PNG, JPG, Base64