dile-components
Icon libraries Web Components catalog
Here we have native components based on the Web Components standard that let you use popular icon libraries in a convenient and developer-friendly way.
Through these components, you can easily integrate icon libraries like Material icons, Lucide Icons, FontAwesome, Phosphor Icons, Tabler Icons or Remix Icon using simple HTML tags that wrap the SVGs. This allows you to style the icons (color, size, etc.) comfortably with CSS custom properties.
Check the Icon Catalog to search and browse the full icon set from all libraries.
Lucide Icons is an open-source icon library offering over 1,000 lightweight, scalable vector graphics (SVGs) designed for consistent style and readability across digital projects. Originating as a community-driven fork of Feather Icons, it emphasizes strict design rules—like a 24x24 pixel canvas, 2-pixel stroke width, and 1-2 pixel spacing—to ensure recognizability and optical balance at any size.
Here you will find an implementation of Lucide Icons as native Web Components, providing a lightweight, framework-agnostic solution that leverages standard web technologies like custom elements and Shadow DOM for optimal encapsulation and reusability.
Font Awesome is a widely-used icon toolkit that provides thousands of scalable vector icons as web fonts, SVGs, and React/Vue/Angular components. Font Awesome offers a robust icon library with a free tier for most projects, alongside a Pro subscription that unlocks premium icon sets.
Dile Components offers an implementation of FontAwesome Icons as native Web Components that makes them easier to implement across any project, providing a lightweight, framework-agnostic solution.
Material Icons is Google's open-source icon collection featuring over 2,500 minimalist, pixel-perfect symbols designed specifically for Material Design, available as SVGs, web fonts, and framework-specific packages for seamless integration across Android, iOS, web, and Flutter applications.
Here you will find an implementation of Material Icons as native Web Components, covering the whole "filled" Material Icons style (2000+ icons) as framework-agnostic Custom Elements, following the same pattern as the Lucide and FontAwesome implementations above.
Dile Components previously offered a partial implementation of Material Icons, featuring a curated selection of icons built with Lit templates. This legacy implementation is kept for backward compatibility with existing components, but new projects should use the Web Components implementation above.
Phosphor Icons is a flexible open-source icon family with over 1,500 icons, each available in 6 weights: regular, thin, light, bold, fill and duotone.
Here you will find an implementation of Phosphor Icons as native Web Components, providing a lightweight, framework-agnostic solution that leverages standard web technologies like custom elements and Shadow DOM for optimal encapsulation and reusability.
Tabler Icons is a free and open-source icon set with over 5,800 pixel-perfect icons, each available in outline and filled variants, all designed on a consistent 24x24 grid.
Here you will find an implementation of Tabler Icons as native Web Components, providing a lightweight, framework-agnostic solution that leverages standard web technologies like custom elements and Shadow DOM for optimal encapsulation and reusability.
Remix Icon is a free, open-source, neutral-style icon system with over 3,000 icons, most of them available in both "line" (outline) and "fill" (solid) variants.
Here you will find an implementation of Remix Icon as native Web Components, providing a lightweight, framework-agnostic solution that leverages standard web technologies like custom elements and Shadow DOM for optimal encapsulation and reusability.