Awesome
Overview
Effortless Icons
- Icon components for different frameworks/libraries
- Popular Icon Packs (Heroicons, Lucide Icons, etc.)
- Icon Themes (different versions of the same icon)
- Builder Template to Create your own Icon Packs
<!-- svelte example -->
<script>
import { Icon } from '@steeze-ui/svelte-icon'
import { Bolt } from '@steeze-ui/heroicons'
</script>
<Icon src="{Bolt}" theme="solid" class="color-gray-900" />
Deploy your own Icon Pack
Copy the Builder Template to easily create and publish your own Icon Pack.
Packages
Icon Components
| Package | Version |
|---|---|
| @steeze-ui/svelte-icon | <a href="https://www.npmjs.com/package/@steeze-ui/svelte-icon"><img src="https://img.shields.io/npm/v/@steeze-ui/svelte-icon.svg?style=flat" /></a> |
| @steeze-ui/lit-icon | <a href="https://www.npmjs.com/package/@steeze-ui/lit-icon"><img src="https://img.shields.io/npm/v/@steeze-ui/lit-icon.svg?style=flat" /></a> |
| @steeze-ui/solid-icon | <a href="https://www.npmjs.com/package/@steeze-ui/solid-icon"><img src="https://img.shields.io/npm/v/@steeze-ui/solid-icon.svg?style=flat" /></a> |
| @steeze-ui/react-icon | <a href="https://www.npmjs.com/package/@steeze-ui/react-icon"><img src="https://img.shields.io/npm/v/@steeze-ui/react-icon.svg?style=flat" /></a> |
| @steeze-ui/vue-icon | <a href="https://www.npmjs.com/package/@steeze-ui/vue-icon"><img src="https://img.shields.io/npm/v/@steeze-ui/vue-icon.svg?style=flat" /></a> |
Icon Packs
| Package | Themes | Sources | Browser | Package Version | Src Version |
|---|---|---|---|---|---|
| @steeze-ui/heroicons | default(outline), solid, mini | tailwindlabs/heroicons | browse | <a href="https://www.npmjs.com/package/@steeze-ui/heroicons"><img src="https://img.shields.io/npm/v/@steeze-ui/heroicons.svg?style=flat" /></a> | 2.2.0 |
| @steeze-ui/simple-icons | default | simple-icons/simple-icons | browse | <a href="https://www.npmjs.com/package/@steeze-ui/simple-icons"><img src="https://img.shields.io/npm/v/@steeze-ui/simple-icons.svg?style=flat" /></a> | 13.17.0 |
| @steeze-ui/tabler-icons | default(outline), filled | tabler/tabler-icons | browse | <a href="https://www.npmjs.com/package/@steeze-ui/tabler-icons"><img src="https://img.shields.io/npm/v/@steeze-ui/tabler-icons.svg?style=flat" /></a> | 3.22.0 |
| @steeze-ui/radix-icons | default | radix-ui/icons | browse | <a href="https://www.npmjs.com/package/@steeze-ui/radix-icons"><img src="https://img.shields.io/npm/v/@steeze-ui/radix-icons.svg?style=flat" /></a> | 5.0.0 |
| @steeze-ui/material-design-icons | default(filled), outlined, rounded, sharp, twotone | google/material-design-icons | browse | <a href="https://www.npmjs.com/package/@steeze-ui/material-design-icons"><img src="https://img.shields.io/npm/v/@steeze-ui/material-design-icons.svg?style=flat" /></a> | 1.14.9 |
| @steeze-ui/lucide-icons | default | lucide-icons/lucide | browse | <a href="https://www.npmjs.com/package/@steeze-ui/lucide-icons"><img src="https://img.shields.io/npm/v/@steeze-ui/lucide-icons.svg?style=flat" /></a> | 0.408.0 |
| @steeze-ui/phosphor-icons | thin, light, default(regular), bold, fill, duotone | Phosphor Icons | browse | <a href="https://www.npmjs.com/package/@steeze-ui/phosphor-icons"><img src="https://img.shields.io/npm/v/@steeze-ui/phosphor-icons.svg?style=flat" /></a> | 2.1.1 |
| @steeze-ui/carbon-icons | default | carbon-design-system/carbon | browse | <a href="https://www.npmjs.com/package/@steeze-ui/carbon-icons"><img src="https://img.shields.io/npm/v/@steeze-ui/carbon-icons.svg?style=flat" /></a> | 11.21.0 |
| @steeze-ui/remix-icons | default(outline), solid | Remix-Design/RemixIcon | browse | <a href="https://www.npmjs.com/package/@steeze-ui/remix-icons"><img src="https://img.shields.io/npm/v/@steeze-ui/remix-icons.svg?style=flat" /></a> | 4.2.0 |
| @steeze-ui/iconic-free | default | iconic.app | browse | <a href="https://www.npmjs.com/package/@steeze-ui/iconic-free"><img src="https://img.shields.io/npm/v/@steeze-ui/iconic-free.svg?style=flat" /></a> | - |
| @steeze-ui/octicons | default(16), 24, 12 | primer/octicons | browse | <a href="https://www.npmjs.com/package/@steeze-ui/octicons"><img src="https://img.shields.io/npm/v/@steeze-ui/octicons.svg?style=flat" /></a> | 19.3.0 |
| @steeze-ui/css-gg | default | CSS.gg Icons | browse | <a href="https://www.npmjs.com/package/@steeze-ui/css-gg"><img src="https://img.shields.io/npm/v/@steeze-ui/css-gg.svg?style=flat" /></a> | 2.1.1 |
| @steeze-ui/font-awesome | default, solid | Font Awesome | browse | <a href="https://www.npmjs.com/package/@steeze-ui/font-awesome"><img src="https://img.shields.io/npm/v/@steeze-ui/font-awesome.svg?style=flat" /></a> | 6.5.1 |
| @steeze-ui/feather-icons (deprecated) | default | feathericons/feather | browse | <a href="https://www.npmjs.com/package/@steeze-ui/feather-icons"><img src="https://img.shields.io/npm/v/@steeze-ui/feather-icons.svg?style=flat" /></a> | 4.29.1 |
Utilities
| Package | Version |
|---|---|
| @steeze-ui/icons | <a href="https://www.npmjs.com/package/@steeze-ui/icons"><img src="https://img.shields.io/npm/v/@steeze-ui/icons.svg?style=flat" /></a> |
Development
This monorepo uses pnpm. To build a new version of the packages just run:
pnpm install && pnpm package