https://github.com/outposthq/jengaicons
Jenga Icons is a collection of adaptable icons designed for use in interfaces, diagrams, and other applications.
https://github.com/outposthq/jengaicons
icon-font icon-pack icons jenga-icons react svg svg-icons
Last synced: 4 months ago
JSON representation
Jenga Icons is a collection of adaptable icons designed for use in interfaces, diagrams, and other applications.
- Host: GitHub
- URL: https://github.com/outposthq/jengaicons
- Owner: outpostHQ
- License: mit
- Created: 2021-11-16T05:33:22.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T12:32:17.000Z (about 2 years ago)
- Last Synced: 2024-04-12T19:58:05.501Z (about 2 years ago)
- Topics: icon-font, icon-pack, icons, jenga-icons, react, svg, svg-icons
- Language: TypeScript
- Homepage: https://jengaicons-website.vercel.app
- Size: 9.27 MB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Jenga Icons
A collection of **2,500+ beautifully crafted icons** in three variants, designed for React and Svelte applications.
[](https://www.npmjs.com/package/@jengaicons/react)
[](https://www.npmjs.com/package/@jengaicons/svelte)
[](https://discord.gg/sHnHPnAPZj)
## Packages
| Package | Version | Description |
|---------|---------|-------------|
| [@jengaicons/react](./packages/jengaicons-react) | [](https://www.npmjs.com/package/@jengaicons/react) | React components |
| [@jengaicons/svelte](./packages/jengaicons-svelte) | [](https://www.npmjs.com/package/@jengaicons/svelte) | Svelte 5 components |
---
## Icon Variants
All icons come in **three variants**:
| Variant | Count | Naming Convention | Description |
|---------|-------|-------------------|-------------|
| **Regular** | 1,208 | `Activity`, `Bell` | Outline/stroke icons with adjustable weight |
| **Fill** | 1,205 | `ActivityFill`, `BellFill` | Solid filled icons |
| **Mono** | 122 | `GithubMono`, `TwitterMono` | Brand logos and monochrome icons |
---
## React
### Installation
```sh
npm install @jengaicons/react
# or
yarn add @jengaicons/react
# or
bun add @jengaicons/react
```
### Usage
```tsx
import { Activity, ActivityFill, GithubMono } from "@jengaicons/react"
function App() {
return (
{/* Regular (outline) */}
{/* Fill (solid) */}
{/* Mono (brand) */}
)
}
```
### Next.js Optimization
```ts
// next.config.mjs
import { nextJsModularizeImport } from "@jengaicons/react"
const nextConfig = {
modularizeImports: {
"@jengaicons/react": nextJsModularizeImport,
},
}
export default nextConfig
```
### Global Configuration (React Context)
```tsx
import { Activity, JengaIconContext } from "@jengaicons/react"
function App() {
return (
{/* Inherits color and size */}
)
}
```
---
## Svelte
### Installation
```sh
npm install @jengaicons/svelte
# or
yarn add @jengaicons/svelte
# or
bun add @jengaicons/svelte
```
### Usage
```svelte
import { Activity, ActivityFill, GithubMono } from "@jengaicons/svelte"
```
### Individual Imports (Best for Tree-Shaking)
```svelte
import Activity from "@jengaicons/svelte/icons/Activity"
import ActivityFill from "@jengaicons/svelte/icons/ActivityFill"
```
---
## Props
Both packages share the same props API:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `color` | `string` | `currentColor` | Icon color (any CSS color value) |
| `size` | `number \| string` | `32` | Width and height in pixels |
| `strokeWidth` | `number \| string` | `1` | Stroke width (Regular icons only) |
| `mirrored` | `boolean` | `false` | Flip icon horizontally (RTL support) |
| `class` | `string` | - | CSS class name |
| `style` | `object` | - | Inline styles |
All standard SVG attributes are passed through to the `` element.
---
## Bundle Size
Icons are optimized for minimal bundle size with full tree-shaking support:
| Package | Per Icon (uncompressed) | Gzipped |
|---------|------------------------|---------|
| React | ~800 bytes | ~400 bytes |
| Svelte | ~250 bytes | ~150 bytes |
*Svelte icons are highly optimized - smaller than alternatives like Lucide.*
---
## Contributing
We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
## License
Jenga Icons is a project by [Outpost](https://outpost.run).
Released under the MIT License.