Jenga Icons for Svelte

Jenga Icons is a collection of over 2,500 beautifully crafted icons designed for use in interfaces, diagrams, and other applications. Fully compatible with Svelte 5 runes.

Installation

# with npm
npm install @jengaicons/svelte

# with yarn
yarn add @jengaicons/svelte

# with bun
bun add @jengaicons/svelte

Usage

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

<Activity />
<ActivityFill color="#6864d4" size={32} />
<AirplayMono size={24} />

Icon Variants

Jenga Icons comes with three variants to suit different design needs:

| Variant | Count | Naming | Description | |---------|-------|--------|-------------| | Regular | 1,208 | Activity, AddressBook | Outline/stroke icons with customizable weight | | Fill | 1,205 | ActivityFill, AddressBookFill | Solid filled icons | | Mono | 122 | AirplayMono, GithubMono | Brand logos and monochrome icons |

Regular (Outline) Icons

<script>
  import { Activity, Bell, Calendar } from "@jengaicons/svelte"
</script>

<Activity />
<Bell strokeWidth={1.5} />
<Calendar size={32} color="blue" />

Fill (Solid) Icons

<script>
  import { ActivityFill, BellFill, CalendarFill } from "@jengaicons/svelte"
</script>

<ActivityFill />
<BellFill size={32} />
<CalendarFill color="#6864d4" />

Mono (Brand) Icons

<script>
  import { GithubMono, TwitterMono, FigmaMono } from "@jengaicons/svelte"
</script>

<GithubMono />
<TwitterMono size={32} />
<FigmaMono color="black" />

Tree-Shaking & Individual Imports

For optimal bundle size, import icons individually:

<script>
  // Direct import - best for tree-shaking
  import Activity from "@jengaicons/svelte/icons/Activity"
  import ActivityFill from "@jengaicons/svelte/icons/ActivityFill"
</script>

<Activity />
<ActivityFill />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | color | string | currentColor | Icon color. Accepts any CSS color value. | | size | number \| string | 32 | Icon dimensions (width & height). | | strokeWidth | number \| string | 1 | Stroke width for Regular icons. | | absoluteStrokeWidth | boolean | false | Scale stroke width with icon size. | | class | string | '' | CSS class name. |

All standard SVG attributes are also supported and passed through to the <svg> element.

Examples

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

<!-- Basic usage -->
<Activity />

<!-- Custom size and color -->
<Activity size={48} color="#6366f1" />

<!-- Custom stroke width -->
<Activity strokeWidth={2} />

<!-- With CSS class -->
<Activity class="my-icon hover:text-blue-500" />

<!-- With inline styles -->
<Activity style="margin-right: 8px;" />

<!-- With event handlers -->
<Activity onclick={() => console.log('clicked')} />

TypeScript

Full TypeScript support is included:

<script lang="ts">
  import { Activity } from "@jengaicons/svelte"
  import type { IconProps } from "@jengaicons/svelte"

  const props: IconProps = {
    size: 24,
    color: "currentColor",
    strokeWidth: 1.5
  }
</script>

<Activity {...props} />

SvelteKit

Works out of the box with SvelteKit:

<!-- src/routes/+page.svelte -->
<script>
  import { Activity, Bell, Settings } from "@jengaicons/svelte"
</script>

<nav>
  <Activity size={20} />
  <Bell size={20} />
  <Settings size={20} />
</nav>

Bundle Size

Each icon adds approximately 200-500 bytes (uncompressed) to your bundle. With tree-shaking, only the icons you import are included.

| Import | Approximate Size (uncompressed) | Gzipped | |--------|--------------------------------|---------| | 1 icon | ~1 KB | ~400 bytes | | 10 icons | ~4 KB | ~1.5 KB | | 100 icons | ~40 KB | ~15 KB |

Our icons are optimized to be smaller than alternatives like Lucide.

License

Jenga Icons is a project by Outpost.

Released under the MIT License.