npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@mal-icons/web

v0.11.0

Published

Zero-build web components and icon data for mal-icons.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

m.anaslatifm.anaslatif

Keywords

iconssvgweb-componentscustom-elementsmal-icons

Readme

@mal-icons/web

npm License: MIT

Zero-build web renderer for mal-icons. Use icons in plain HTML via a <mal-icons> custom element, render them imperatively, or lazy-load them from a CDN — no framework, no bundler required.

Highlights

  • No build step — works straight from a <script type="module"> and a CDN.
  • Safe by construction — every shape is built with document.createElementNS; never innerHTML, so CDN-loaded data is safe.
  • <mal-icons> custom element — declarative, re-renders on attribute changes.
  • Serializable data — icons ship as tiny tree-shakeable JSON payloads.
  • Theming + animations — size, color, multicolor, weight, animate, secondaryColor, plus the shared CSS animation presets.

Installation

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

Or use it directly from a CDN with no install (see below).

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/web usage. See the Web setup guide.

Quick start — custom element (no build)

<script type="module">
  import { defineMalIcon, registerIcons } from "https://esm.sh/@mal-icons/web";
  import { fi } from "https://esm.sh/@mal-icons/web/fi";

  registerIcons(fi);
  defineMalIcon();
</script>

<mal-icons name="FiActivity" size="24" title="Status"></mal-icons>

The element observes its attributes — change size, color, weight, or animate and it re-renders automatically.

Imperative rendering

import { renderIcon } from "@mal-icons/web";
import FiActivity from "@mal-icons/web/fi/FiActivity.json" with { type: "json" };

document.body.appendChild(
  renderIcon(FiActivity, { size: 24, title: "Status" }),
);

Lazy / CDN loading

import { cdnLoader, defineMalIcon } from "@mal-icons/web";

const load = cdnLoader("https://cdn.example.com/mal-icons/fi");
const data = await load("FiActivity");

// Or wire the loader into the custom element for on-demand resolution:
defineMalIcon("mal-icons", load);
<!-- resolves <baseUrl>/<name>.json via the loader, or a direct src URL -->
<mal-icons name="FiActivity"></mal-icons>
<mal-icons src="https://cdn.example.com/fi/FiActivity.json"></mal-icons>

API

| Export | Description | | --------------- | --------------------------------------------------------------- | | renderIcon | Build an <svg> element from IconData (no innerHTML) | | defineMalIcon | Register the <mal-icons> custom element (optional CDN loader) | | registerIcons | Seed the in-memory registry for synchronous name resolution | | clearRegistry | Clear the registry (mainly for tests) | | cdnLoader | Build a validating loader for <baseUrl>/<name>.json | | isIconData | Type guard validating an unknown payload | | IconLoader | (name: string) => Promise<IconData> type |

<mal-icons> attributes

name, src, size, color, multicolor, weight, animate, title, class.

Animations

import { ICON_ANIMATIONS_CSS } from "@mal-icons/core";

document.head.insertAdjacentHTML(
  "beforeend",
  `<style>${ICON_ANIMATIONS_CSS}</style>`,
);
<mal-icons name="FiLoader" animate="spin"></mal-icons>

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 | | Bootstrap Icons | MIT license | 1.13.1 | 2078 | | Boxicons Logos | CC BY 4.0 license | 2.1.4 | 155 | | Boxicons Regular | CC BY 4.0 license | 2.1.4 | 814 | | Boxicons Solid | CC BY 4.0 license | 2.1.4 | 665 | | 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 | | Game Icons | CC BY 3.0 license | 82d9488 | 4180 | | Grommet | Apache 2.0 license | 4.14.0 | 637 | | Heroicons | MIT license | 2.2.0 | 324 | | Ionicons | MIT license | 8.0.13 | 1357 | | Line Awesome | MIT license | 1.2.1 | 1544 | | Lucide | ISC license | 1.19.0 | 1727 | | Material Icons Filled | Apache 2.0 license | 0.14.15 | 2122 | | Material Icons Rounded | Apache 2.0 license | 0.14.15 | 2122 | | Material Icons Sharp | Apache 2.0 license | 0.14.15 | 2122 | | Material Icons Two Tone | Apache 2.0 license | 0.14.15 | 2122 | | Material Symbols Outlined | Apache 2.0 license | 0.9.0 | 3004 | | Material Symbols Rounded | Apache 2.0 license | 0.9.0 | 3004 | | Material Symbols Sharp | Apache 2.0 license | 0.9.0 | 3004 |

| Octicons | MIT license | 19.28.1 | 733 | | Phosphor | MIT license | 2.0.8 | 1248 | | Radix Icons | MIT license | 0.0.17 | 318 | | Remix Icon | Apache 2.0 license | 4.6.0 | 3058 | | Simple Icons | CC0 1.0 license | 16.23.0 | 3442 | | Simple Line Icons | MIT license | 2.5.5 | 189 | | Tabler Icons | MIT license | 3.44.0 | 5093 | | 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/web | Renderer, custom element, CDN loader | | @mal-icons/web/ad | The Ant Design set as a { name: IconData } object | | @mal-icons/web/ci | The Circum set as a { name: IconData } object | | @mal-icons/web/dev | The Devicons set as a { name: IconData } object | | @mal-icons/web/ad/AdHome.json | A single Ant Design icon's JSON data | | @mal-icons/web/ci/CiHeart.json | A single Circum icon's JSON data | | @mal-icons/web/dev/DevDreamhost.json | A single Devicons icon's JSON data | | @mal-icons/web/fa | The Font Awesome set as a { name: IconData } object | | @mal-icons/web/fab | The Font Awesome Brands set as a { name: IconData } object | | @mal-icons/web/far | The Font Awesome Regular set as a { name: IconData } object | | @mal-icons/web/fc | The Flat Color set as a { name: IconData } object | | @mal-icons/web/fi | The Feather set as a { name: IconData } object | | @mal-icons/web/gi | The Game Icons set as a { name: IconData } object | | @mal-icons/web/gr | The Grommet set as a { name: IconData } object | | @mal-icons/web/fa/FaHeart.json | A single icon's JSON data | | @mal-icons/web/fab/FabGithub.json | A single icon's JSON data | | @mal-icons/web/far/FarHeart.json | A single icon's JSON data | | @mal-icons/web/fc/FcAbout.json | A single icon's JSON data | | @mal-icons/web/fi/FiActivity.json | A single icon's JSON data | | @mal-icons/web/gi/GiAce.json | A single icon's JSON data | | @mal-icons/web/gr/GrHome.json | A single icon's JSON data | | @mal-icons/web/io | The Ionicons set as a { name: IconData } object | | @mal-icons/web/la | The Line Awesome set as a { name: IconData } object | | @mal-icons/web/lu | The Lucide set as a { name: IconData } object | | @mal-icons/web/mdf | All Material Icons Filled (named exports) | | @mal-icons/web/mdr | All Material Icons Rounded (named exports) | | @mal-icons/web/mds | All Material Icons Sharp (named exports) | | @mal-icons/web/mdt | All Material Icons Two Tone (named exports) | | @mal-icons/web/mso | All Material Symbols Outlined (named exports) | | @mal-icons/web/msr | All Material Symbols Rounded (named exports) | | @mal-icons/web/mss | All Material Symbols Sharp (named exports) | | @mal-icons/web/oc | The Octicons set as a { name: IconData } object | | @mal-icons/web/io/IoHeart.json | A single Ionicons icon's JSON data | | @mal-icons/web/la/LaHeart.json | A single Line Awesome icon's JSON data | | @mal-icons/web/lu/LuHeart.json | A single Lucide icon's JSON data | | @mal-icons/web/oc/OcHeart16.json | A single Octicons icon's JSON data | | @mal-icons/web/ti | The Typicons set as a { name: IconData } object | | @mal-icons/web/wi | The Weather Icons set as a { name: IconData } object | | @mal-icons/web/ti/TiHeart.json | A single Typicons icon's JSON data | | @mal-icons/web/wi/WiDaySunny.json | A single Weather Icons icon's JSON data | | @mal-icons/web/hi | All Heroicons icons (named exports) | | @mal-icons/web/hi/HiAcademicCap.json | A single Heroicons icon module | | @mal-icons/web/sl | All Simple Line Icons icons (named exports) | | @mal-icons/web/sl/SlActionRedo.json | A single Simple Line Icons icon module | | @mal-icons/web/cg | All css.gg icons (named exports) | | @mal-icons/web/cg/CgAbstract.json | A single css.gg icon module | | @mal-icons/web/vsc | All Codicons icons (named exports) | | @mal-icons/web/vsc/VscAccount.json | A single Codicons icon module | | @mal-icons/web/tf | All Themify icons (named exports) | | @mal-icons/web/tf/TfAgenda.json | A single Themify icon module | | @mal-icons/web/rx | All Radix Icons icons (named exports) | | @mal-icons/web/rx/RxAccessibility.json | A single Radix Icons icon module | | @mal-icons/web/bs | All Bootstrap Icons icons (named exports) | | @mal-icons/web/bs/BsAlarm.json | A single Bootstrap Icons icon module | | @mal-icons/web/ri | All Remix Icon icons (named exports) | | @mal-icons/web/ri/RiHome2Line.json | A single Remix Icon icon module | | @mal-icons/web/si | All Simple Icons icons (named exports) | | @mal-icons/web/si/SiGithub.json | A single Simple Icons icon module | | @mal-icons/web/bx | All Boxicons Regular icons (named exports) | | @mal-icons/web/bx/BxAbacus.json | A single Boxicons Regular icon module | | @mal-icons/web/bxl | All Boxicons Logos icons (named exports) | | @mal-icons/web/bxl/BxlGithub.json | A single Boxicons Logos icon module | | @mal-icons/web/bxs | All Boxicons Solid icons (named exports) | | @mal-icons/web/bxs/BxsHeart.json | A single Boxicons Solid icon module | | @mal-icons/web/tb | All Tabler icons (named exports) | | @mal-icons/web/tb/TbHeart.json | A single Tabler icon module | | @mal-icons/web/ph | All Phosphor icons (named exports) | | @mal-icons/web/ph/PhHeart.json | A single Phosphor icon module |

Example

A framework-free Vite demo using <mal-icons> and registerIcons lives in examples/web. A no-build SVG sprite demo lives in examples/cdn-sprite.

Repository

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

License

MIT © MALDevs