Case study 04 — Self-initiated · Product design

Small details. Better products.

UXNido Icons is a place to find, restyle and export one of 5,130 open-source icons. It's also unusually clear about where those icons come from.

Role
Self-initiated
Product design
Type
Live web product
Free today, paid plans planned
Year
2026
Built on
Tabler Icons v3.46.0
MIT licence
Open UXNido Icons ↗ Live site. Opens in a new tab.
UXNido Icons home page with the headline Small details. Better products. and a tilted grid of icons
01The front door. The first thing it says is "5,130 open-source icons". The source is stated before anything is offered.
01 — Why build it

Finding an icon is easy. Making it fit isn't.

An icon has to match the product it goes into: the stroke weight, the colour, the size and the file format all have to be right.

The UXNido Design System in case study 02 carries a full open-source icon set. UXNido Icons takes that set and builds a product around the job people actually have: find the right icon, make it fit, and export it in the right format.

Icon systems are a recurring thread in my work. The agentic platform case study covers the icon library I modernised and the generator I built for it. UXNido Icons is a self-initiated, public-facing project in the same territory.

Don't redraw the icons. Design the workflow around them.
02 — What made it hard

Five problems behind a simple download button.

5,130 icons, one screen

Nobody scrolls through five thousand icons. People needed search by name or keyword, categories with counts, and a stable URL for every icon so one can be shared.

Restyling without redrawing

A filled or two-colour version isn't a separate drawing, so it has to be generated from the outline. That only works on some shapes, and the interface has to say so.

Every destination wants something different

Figma and the web want SVG. Slides want a transparent PNG. Developers may want an icon font. Each supports different colour and stroke options.

Open source, sold honestly

The MIT licence allows commercial use and resale. The design problem was being clear about what a paid plan actually adds when the icons themselves are free.

Attribution has to travel

The licence notice must stay with the file after it leaves the site, so the export flow has to carry it without anyone having to remember.

03 — The decision

Say where the icons come from, everywhere.

The home page opens with the words "open-source". Every icon page, the footer and a dedicated licence page name Tabler as the source. The licence page says it plainly: "They are not exclusive UXNido artwork."

That honesty shapes the pricing too. The paid plan is described as packaging, not artwork, and its terms can't take away rights the MIT licence already grants.

"One-time packaging fee. Open-source icons."

The Pro plan's own subtitle. What's for sale is the workflow, not the drawings.
5,130Tabler outline icons, searchable by name, keyword and category
1.5 pxdefault stroke, adjustable from 0.75 to 3
8export sizes, from 16 to 512 px
3formats: SVG, transparent PNG and an icon font
04 — The flow

Find it. Make it yours. Take it with you.

01

Find it

Search sits above the grid, with an example of what to type: "try arrow, list, finance". Categories run down the left with their counts, so you know the size of a category before you open it. Every result shows its real name in monospace, the same name a developer will use.

Icon library page with a search field, a category list with counts, and a grid of named icons
025,130 icons in one library. The count, the grid size and the stroke weight are stated above the results, so nothing about them is a surprise.
02

Make it yours

Each icon has its own page with a live preview on a 24 × 24 grid, the same icon shown at 16, 24, 32 and 48 px, and one panel of controls: appearance, stroke width, primary colour and a second colour.

"These are generated treatments, not separately drawn filled variants."

The customiser tells you what it's doing, so nobody mistakes an automatic fill for a drawn one.
Icon detail page for palette with two-colour treatment, stroke slider, colour pickers, export size and format, and Download and Copy SVG buttons
03Outline, tinted fill or two colour. Tinted fill only applies to closed shapes, and two colour alternates the icon's vector elements. The rules are written beside the control rather than hidden in documentation.
03

Take it with you

Pick a size from 16 to 512 px and a format, then download or copy the SVG. No account is needed. The licence comment stays inside every SVG, and a licence file downloads alongside every PNG.

Resources page with steps and a table comparing SVG, PNG and TTF or WOFF2 formats
04A short handoff guide instead of a manual. It explains which format fits Figma, slides or a codebase, and what each one supports.
04

Start from a collection

Five free, themed collections give people a starting point: everyday essentials, commerce, productivity, nature and direction. Each is labelled "Free · Tabler". A future original family, UXNido Originals, is marked as planned rather than implied to exist.

Collections page with themed icon sets labelled Free and Tabler
05Every collection card carries its source and price in the same place, before its title.
05 — Pricing and licence

Honest about what isn't ready yet.

Individual icons are free for personal and commercial use. The paid plans are shown as planned, with a clear note that checkout isn't open.

Pro (US$9, one time) packages the full organised bundle, the icon font with CSS mapping and curated collections. Studio (US$79, one time) adds team conventions and onboarding. Both are marked as planned. The licence page separates what Pro would charge for from the rights that MIT already gives everyone.

Pricing page with Free, Pro and Studio plans, the paid plans marked as planned
Licence and credits page naming Tabler Icons as the source of the collection

Left: pricing, with the paid plans labelled as planned. Right: the licence page, which names the source, version and copyright holder.

06 — Accessibility

An icon is not a label.

Label the important actions

Use a visible text label for important actions. An icon on its own is a guess.

Name icon-only buttons

An icon-only button needs an accessible name. Decorative icons are hidden from screen readers.

Don't lean on the font

An icon font must never be the only source of meaningful text.

Home page section titled Your palette. Your stroke. Your finishing touch. showing one icon in three treatments
06The three treatments, previewed on the home page before anyone opens the customiser.
07 — Scope, stated plainly

What's mine, and what isn't.

The icons aren't mine

5,130 Tabler Outline icons, version 3.46.0, copyright Paweł Kuna, under the MIT licence. UXNido displays them at a 1.5 px stroke. They are not exclusive artwork.

The product around them is

The information architecture, search and categories, the customiser and its rules, the export flow, the collections, and the way pricing and licensing are communicated.

Free today, paid plans planned

Checkout isn't open. No sales, revenue or user numbers are claimed.

Not launched

UXNido Originals, an original premium family, is in development. It will ship with its own licence if and when it's ready.

5free themed collections
3appearance treatments
8export sizes
0accounts needed to download
08 — Try it

Explore UXNido Icons.

Search the library, restyle an icon in two colours and export it at the size you need.

Open UXNido Icons ↗ Opens in a new tab.