@mal-icons/svelte

Svelte 5 adapter for mal-icons — a high-performance, tree-shakeable icon SDK. Each icon is a pre-generated .svelte component built with runes; shapes render via <svelte:element>, never {@html}.

Highlights

• Svelte 5 runes — modern, fine-grained reactivity.
• Tree-shakeable — every icon is its own component.
• Themeable — context theming via setIconContext, with per-icon overrides.
• Ships source — the package distributes its .svelte source so your bundler (Vite/SvelteKit) compiles it in your app's Svelte version.
• Accessible — correct role / aria-hidden and optional <title>.

Installation

bun add @mal-icons/svelte
# or
npm install @mal-icons/svelte

Requires Svelte 5 or newer (peer dependency).

Use with AI agents

AI coding agents can add and theme these icons for you via the mal-icons agent skill. Install it with the skills CLI:

npx skills add mal-icons/mal-icons

Then ask your agent to "add a trash icon" and it searches the catalog and writes the correct @mal-icons/svelte import. See the Svelte setup guide.

Quick start

<script lang="ts">
  import { FiActivity } from "@mal-icons/svelte/fi";
</script>

<FiActivity size={24} title="Status" />

App-wide theming

Call setIconContext in a parent component; descendants inherit the values and per-icon props override them:

<script lang="ts">
  import { setIconContext } from "@mal-icons/svelte";
  setIconContext({ size: 20, color: "#3366ff" });
</script>

<slot />

Props

| Prop | Type | Description | | -------- | ------------------------------------------ | ------------------------------------ | | size | number \| string | Width and height (defaults to 1em) | | color | string | Overrides currentColor | | multicolor | boolean | Keep the icon's own colors (omits the currentColor stroke/fill defaults) | | weight | "thin" \| "light" \| "regular" \| "bold" | Stroke weight for stroke-based sets | | title | string | Accessible label | | class | string | Additional class names |

API

import {
  IconBase,
  setIconContext,
  getIconContext,
  DefaultIconContext,
} from "@mal-icons/svelte";

Icons

The bundled icon sets, their upstream licenses, pinned versions, and counts:

| Icon Library | License | Version | Count | | ---------------------------------------- | --------------------------------------------------------------------------------- | ------- | ----: | | Ant Design Icons | MIT license | 4.0.0 | 420 | | Circum Icons | MPL-2.0 license | 2.0.2 | 288 | | Codicons | CC BY 4.0 license | 0.0.46 | 604 | | css.gg | MIT license | 2.1.1 | 704 | | Devicons | MIT license | 2.0.1 | 1725 | | Feather | MIT license | 4.29.0 | 287 | | Flat Color Icons | CC BY 4.0 license | 1.0.2 | 312 | | Font Awesome Free | CC BY 4.0 license | 6.7.2 | 1402 | | Font Awesome Free Brands | CC BY 4.0 license | 6.7.2 | 495 | | Font Awesome Free Regular | CC BY 4.0 license | 6.7.2 | 163 | | Grommet | Apache 2.0 license | 4.14.0 | 637 | | Heroicons | MIT license | 2.2.0 | 324 | | Ionicons | MIT license | 8.0.13 | 1357 | | Lucide | ISC license | 1.19.0 | 1727 | | Octicons | MIT license | 19.28.1 | 733 | | Radix Icons | MIT license | 0.0.17 | 318 | | Simple Line Icons | MIT license | 2.5.5 | 189 | | Themify | SIL OFL 1.1 license | 9600186 | 352 | | Typicons | CC BY-SA 4.0 license | 2.1.2 | 336 | | Weather Icons | SIL OFL 1.1 license | 2.0.12 | 219 |

Subpath exports

| Import | Contents | | ---------------------------------------- | --------------------------------- | | @mal-icons/svelte | Adapter and context helpers | | @mal-icons/svelte/ad | All Ant Design icons (named exports) | | @mal-icons/svelte/ci | All Circum icons (named exports) | | @mal-icons/svelte/dev | All Devicons icons (named exports) | | @mal-icons/svelte/ad/AdHome.svelte | A single Ant Design icon component | | @mal-icons/svelte/ci/CiHeart.svelte | A single Circum icon component | | @mal-icons/svelte/dev/DevDreamhost.svelte | A single Devicons icon component | | @mal-icons/svelte/fa | All Font Awesome icons (named exports) | | @mal-icons/svelte/fab | All Font Awesome Brands icons (named exports) | | @mal-icons/svelte/far | All Font Awesome Regular icons (named exports) | | @mal-icons/svelte/fc | All Flat Color icons (named exports) | | @mal-icons/svelte/fi | All Feather icons (named exports) | | @mal-icons/svelte/gr | All Grommet icons (named exports) | | @mal-icons/svelte/fa/FaHeart.svelte | A single icon component | | @mal-icons/svelte/fab/FabGithub.svelte | A single icon component | | @mal-icons/svelte/far/FarHeart.svelte | A single icon component | | @mal-icons/svelte/fc/FcAbout.svelte | A single icon component | | @mal-icons/svelte/fi/FiActivity.svelte | A single icon component | | @mal-icons/svelte/gr/GrHome.svelte | A single icon component | | @mal-icons/svelte/io | All Ionicons (named exports) | | @mal-icons/svelte/lu | All Lucide (named exports) | | @mal-icons/svelte/oc | All Octicons (named exports) | | @mal-icons/svelte/io/IoHeart.svelte | A single Ionicons icon component | | @mal-icons/svelte/lu/LuHeart.svelte | A single Lucide icon component | | @mal-icons/svelte/oc/OcHeart16.svelte | A single Octicons icon component | | @mal-icons/svelte/ti | All Typicons (named exports) | | @mal-icons/svelte/wi | All Weather Icons (named exports) | | @mal-icons/svelte/ti/TiHeart.svelte | A single Typicons icon component | | @mal-icons/svelte/wi/WiDaySunny.svelte | A single Weather Icons icon component | | @mal-icons/svelte/hi | All Heroicons icons (named exports) | | @mal-icons/svelte/hi/HiAcademicCap | A single Heroicons icon module | | @mal-icons/svelte/sl | All Simple Line Icons icons (named exports) | | @mal-icons/svelte/sl/SlActionRedo | A single Simple Line Icons icon module | | @mal-icons/svelte/cg | All css.gg icons (named exports) | | @mal-icons/svelte/cg/CgAbstract | A single css.gg icon module | | @mal-icons/svelte/vsc | All Codicons icons (named exports) | | @mal-icons/svelte/vsc/VscAccount | A single Codicons icon module | | @mal-icons/svelte/tf | All Themify icons (named exports) | | @mal-icons/svelte/tf/TfAgenda | A single Themify icon module | | @mal-icons/svelte/rx | All Radix Icons icons (named exports) | | @mal-icons/svelte/rx/RxAccessibility | A single Radix Icons icon module |

Example

A Vite + Svelte 5 gallery (runes, scoped styles, setIconContext) lives in examples/svelte.

Repository

https://github.com/mal-icons/mal-icons · package directory packages/svelte.

License

MIT © MALDevs