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 or FontAwesome using simple HTML tags that wrap the SVGs. This allows you to style the icons (color, size, etc.) comfortably with CSS custom properties.
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.
Dile Components provides a partial implementation of Material Icons as native Web Components, featuring a curated selection of the most commonly used icons optimized for Material Design principles. This implementation leverages Lit templates to deliver customizable icons using CSS Custom Properties.