Jenga Icons

A collection of 2,500+ beautifully crafted icons in three variants, designed for React and Svelte applications.

Packages

Package	Version	Description
@jengaicons/react		React components
@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

npm install @jengaicons/react
# or
yarn add @jengaicons/react
# or
bun add @jengaicons/react

Usage

import { Activity, ActivityFill, GithubMono } from "@jengaicons/react"

function App() {
  return (
    <div>
      {/* Regular (outline) */}
      <Activity size={24} color="currentColor" />

      {/* Fill (solid) */}
      <ActivityFill size={24} color="#6864d4" />

      {/* Mono (brand) */}
      <GithubMono size={24} />
    </div>
  )
}

Next.js Optimization

// next.config.mjs
import { nextJsModularizeImport } from "@jengaicons/react"

const nextConfig = {
  modularizeImports: {
    "@jengaicons/react": nextJsModularizeImport,
  },
}

export default nextConfig

Global Configuration (React Context)

import { Activity, JengaIconContext } from "@jengaicons/react"

function App() {
  return (
    <JengaIconContext.Provider value={{ color: "blue", size: 24 }}>
      <Activity /> {/* Inherits color and size */}
    </JengaIconContext.Provider>
  )
}

---

Svelte

Installation

npm install @jengaicons/svelte
# or
yarn add @jengaicons/svelte
# or
bun add @jengaicons/svelte

Usage

<script>
  import { Activity, ActivityFill, GithubMono } from "@jengaicons/svelte"
</script>

<!-- Regular (outline) -->
<Activity size={24} color="currentColor" />

<!-- Fill (solid) -->
<ActivityFill size={24} color="#6864d4" />

<!-- Mono (brand) -->
<GithubMono size={24} />

Individual Imports (Best for Tree-Shaking)

<script>
  import Activity from "@jengaicons/svelte/icons/Activity"
  import ActivityFill from "@jengaicons/svelte/icons/ActivityFill"
</script>

---

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 <svg> 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 for details.

License

Jenga Icons is a project by Outpost.

Released under the MIT License.