dile-components
Lucide
Community fork of Feather: 1,000+ clean icons on a strict 24×24 grid with a consistent 2px stroke.
Icon libraries as Web Components
dile-components takes the most popular open-source icon libraries — Lucide, Font Awesome, Material Icons, Phosphor, Tabler and Remix Icon — and repackages every icon as a native Web Component. No icon fonts, no framework-specific wrappers, no copy-pasting SVG markup: install one package and drop a custom element on the page.
Because each icon is a standalone Custom Element built on web standards, it works the same in React,
Vue, Angular, Astro, plain HTML or any other stack. Imports are tree-shakeable — you ship only
the icons you actually use — and every icon styles itself through CSS custom properties such as
--dile-icon-size and --dile-icon-color, defaulting to currentColor
so it behaves just like text.
Available icon libraries
Each library ships as its own set of tagged components, plus a generic single-icon component and a badge component. Follow the links for full documentation, styling options and the per-library icon browser.
Font Awesome
One of the most widely used icon toolkits on the web, with thousands of icons in its free tier.
Material Icons
Google's Material Design set: 2,000+ pixel-perfect “filled” symbols used across web and mobile UIs.
Phosphor
1,500+ icons, each available in six weights: thin, light, regular, bold, fill and duotone.
Tabler
5,800+ pixel-perfect icons on a 24×24 grid, in outline and filled variants.
Remix Icon
Neutral-style system of 3,000+ icons, most available in both line and fill variants.
One tag for every library: dile-iconlib and dile-icon-badge
When you don't want to commit to a single library — or you need to switch icons at runtime
— reach for the two universal components. Both take a single icon string in the
family.name format (for example lucide.house or
material.receipt) and resolve the right element for you.
Universal icon — dile-iconlib
A single icon tag for any supported library. Ideal for data-driven lists and conditional rendering where the icon — or even the library — changes dynamically.
<dile-iconlib icon="lucide.house"></dile-iconlib>Universal badge — dile-icon-badge
The same idea for labelled badges, with shared variant states
(success, warning, danger, soft…) and
one unified set of CSS variables across every family.
<dile-icon-badge icon="material.check-circle" variant="success">Ready</dile-icon-badge>Full icon catalog
Browse and search every icon from all six libraries at once. Filter by library or narrow down to brand icons, then click any icon to get the exact install command, import statement and tag you need to use it. This same catalog is also available on its own Icon Catalog page.