Elementa is a free and open-source icon library with over 200 icons. In a world, where every second day we have a new icon library, Elementa tries to provide a unique flavor to its design ideology which is fun, playful, and on-point.
Elementa is open to be used in personal and commercial projects, be it digital or non-digital enabling developers and designers to create beautiful apps and end-user experience rather than a new icon library.
We retired the daVinci jersey, but we kept the MVP.
Elementa represents the icons—the pound-for-pound best athletes—from our original daVinci system built for deriva's first product tallileo.
Even though the stadium lights are dimmed on the main projects, the game must go on. I’m handing off the playbook to you. Elementa and my other personal projects are now open-source and ready for you to take it to the house.
Get in the game here: deriva - Tools
Elementa is the icon locker — every glyph you’ll want, snug in one place. v1 drops with a stacked starting lineup of categories to cover the major plays, but this isn’t a closed roster. New use cases pop up all the time; when the community shouts for a fresh category, Elementa subs in, gets juiced, and levels up — instant power-up, no paperwork.
Think of Elementa’s icons as your starting lineup — fully coachable so you can call the perfect UX play. v1 brings lean-but-mighty customization options to add flair and function. Check the Configurations playbook to get them game-ready.
Elementa’s newborn and hungry for community and contributors. Bugs, ideas, and dad jokes welcome. Join us on GitHub — contribute, collaborate, or just lurk and cheer.
Install the library in your project by running:
1npm install elementa-icons 2# or 3yarn add elementa-icons
Add desired icons in your project:
1import { MyIcon } from 'elementa-icons';
2
3function MyComponent() {
4 return <MyIcon color="#007BFF" size="24px" />;
5}Look, before we start throwing punches, let’s get one thing straight. I’m not here to tell you the Beatles suck just because I started a garage band. That’s not what we’re doing.
These other libraries? They’re the titans. They’re the '27 Yankees. They built the roads we’re driving on, and I respect the hell out of ’em. But let’s be honest for a second—why is everyone so serious? Why is every icon so… clinical? It’s like, 'Here is a user icon. It is a circle and a curve. It has no soul. It pays its taxes on time.'
We’re not trying to replace the plumbing; we’re just trying to paint the house a color that doesn’t make you want to stare at a wall. We’re bringing the fun back. So, here’s how we stack up against the heavyweights. Don’t get mad at me, I’m just calling it like I see it.
Look, Lucide is great, okay? It’s the Honda Accord of icons. It works. It’s reliable. You put it in your app, and nobody complains. But here’s the thing—it’s a little… serious. It’s like going to a dinner party where everyone is talking about their 401(k)s. Elementa? Elementa is the guy doing a cannonball into the pool with a beer in his hand. We got curves, we got bounce. We’re not just trying to be ‘legible,’ we’re trying to have a good time. If Lucide is a spreadsheet, Elementa is a cartoon. You want clean? Go Lucide. You want a personality? You come to us.
Listen, you gotta respect the OG. FontAwesome was there when the internet looked like a ransom note. They have an icon for everything. You need an icon for a ‘left-handed spatula used on Tuesdays’? They probably got it in the Pro pack. But man, sometimes you don’t need the entire industrial complex of iconography. Sometimes it feels heavy, ya know? Like wearing a suit of armor to go buy milk. Elementa is lighter. It’s looser. We ain’t trying to cover every noun in the dictionary. We’re just trying to make your button look like it’s happy to be clicked. We’re the boutique shop; they’re the mega-mall.
Iconsax is slick, I’ll give ’em that. Very sharp. Very ‘I work at a tech startup with an espresso machine that costs more than my car.’ It’s got that geometric precision, right? But it’s a little… stiff. It’s like a tuxedo. It looks great, but can you dance in it? Elementa is sweatpants that look like dress pants. It’s got that comfort. Our corners are rounded because life is hard enough without sharp edges poking you in the eye. We’re bringing the ‘delight,’ the ‘whimsy’—words I hate using, but it’s true. Iconsax is for the boardroom; Elementa is for the breakroom.
Elementa v1 keeps customization simple but expressive. You can style icons the way you style any other UI primitive: with CSS, inline SVG attributes, or component props. Below are practical patterns and examples for Color, Sizing, and Stroke width so you can get icons game-ready in minutes.
You can change the color of an icon by passing in the HEX value to color props for the icons:
1<Badminton color="#FF2D55" />
All icons in elementa are vector SVGs, which means you can scale them by width/height.
Just pass height or width prop to the icon.
1<Tram 2 height={32} 3 width={32} 4/>
Stroke width controls the thickness of outlines for the icons.
v1 supports setting stroke width via the strokeWidth props on an icon. The default value is 1.
1<OpenBook strokeWidth="2" />
Elementa aims to be everywhere you build — a tiny, delightful icon system with offerings for the whole front-end roster. Below are the official package targets and their current status. Want to captain a package? We’re looking for teammates — fork, PR, or claim one and let’s win together.
If you want to contribute in supporting the above frameworks please reach out @ support@elementa.dev with the title: Let's make icons more fun on [framework-name]
A detailed guide on how to contribute to elementa via code is available here elementa - Contributing
For the designer in you who want to contribute to elementa, keep checking this space, as our designer has not returned from her NY vacation as we are still awaiting some documentation on this. 🤪