Free
Regular Rounded
The default. Round ends and corners. Easy to read from 16 to 24 px.
Styles
One icon, 15 styles
Each icon is drawn once, and the build makes every style from that drawing.
Playground
Try every style on real icons
Pick a style, then change weight, size and colour.
Style
Colour
Pro style. Add your licence key in the icon browser to use it.
Free, MIT
Three free styles
Every icon in the library is free in these three.
Free
Solid
The shape filled in, with the details cut out. Use it for the selected tab and at small sizes.
Free
Regular Sharp
Square ends and crisp corners. It is free, and you can preview and copy it today.
What the browser shows today
The browser has Regular Rounded, Regular Sharp, Solid and eight of the twelve Pro styles. Pro styles open with a licence key, and this page shows samples. The Sharp weights and Glass are coming soon.
PRO stroke styles
More weights, rounded and sharp
Pro adds thin, light and bold, and switching weight never moves your layout.
PRO
Pro style. Add your licence key in the icon browser to use it.
Thin
The lightest line. Best at large sizes.
PRO
Pro style. Add your licence key in the icon browser to use it.
Light
A little heavier. Good at 24 px and up.
PRO
Pro style. Add your licence key in the icon browser to use it.
Bold
The heaviest line. Good for small sizes and dark mode.
PRO
Pro style. Add your licence key in the icon browser to use it.
Sharp weights
Thin, light and bold with square ends.
| Rounded | Sharp | |
|---|---|---|
| Ends and corners | Round ends, round corners | Square ends, sharp corners |
| Looks | Soft and friendly | Precise and technical |
| Free weight | Regular | Regular |
| Pro weights | Thin, light, bold | Thin, light, bold |
PRO layered styles
Two layers in one icon
Each drawing knows which part is the object and which part is the detail.
PRO
Pro style. Add your licence key in the icon browser to use it.
Duotone
Regular lines over a light tint of the object. Good for dashboards and cards.
PRO
Pro style. Add your licence key in the icon browser to use it.
Twotone
The detail in a second colour. You can set it in CSS.
PRO
Pro style. Add your licence key in the icon browser to use it.
Bulk
The object soft and the detail strong, so the eye goes to the detail.
PRO effect styles
Effects for landing pages
These styles suit big, decorative spots more than busy app screens.
PRO
Pro style. Add your licence key in the icon browser to use it.
Gradient
Regular lines filled with a gradient. Change the colours in CSS.
PRO
Pro style. Add your licence key in the icon browser to use it.
Glass
A coloured icon behind a frosted glass front, with a soft shadow.
PRO
Pro style. Add your licence key in the icon browser to use it.
Tile
The icon inside a soft rounded square.
Choosing
Which style to use where
Use this as a starting point, since every style mixes well with the others.
| Job | Good fit | Plan |
|---|---|---|
| Toolbars, menus, forms | Regular Rounded or Regular Sharp | Free |
| Selected tab | Solid, with Regular for the other tabs | Free |
| Small sizes and dense tables | Solid, or Bold | Free, Pro |
| Dashboards and empty states | Duotone, twotone or bulk | Pro |
| Landing pages and feature lists | Gradient, glass or tile | Pro |
FAQ
Questions
Which UIX Icons styles are free?
Three: Regular Rounded, Regular Sharp and Solid. They are free and open source under the MIT licence, and every icon comes in all three. The browser shows all three today, and you can copy and download each one. The other twelve styles are Pro. Eight are in the browser and open with a licence key.
Can I mix styles in one product?
Yes. Every style comes from the same drawing, so size and shape match. A common free mix is Regular Rounded for the tabs you are not on and Solid for the one you are on. Glass and tile, both Pro, look best on marketing pages, not busy app screens.
What is the difference between duotone, twotone and bulk?
All three are Pro styles. Duotone keeps the regular lines and adds a light tint inside the object. Twotone keeps the lines and paints the detail in a second colour. Bulk fills the object softly and draws the detail at full strength, so the detail stands out.
What is the difference between solid and duotone icons?
A solid icon fills its main shapes with one flat colour. A duotone icon draws the regular outline and adds a soft tint inside the shapes, so it has two levels of weight. Solid is free under MIT. Duotone is a Pro style. Both come from the same drawing.
What is the difference between rounded and sharp icons?
Rounded icons have round line ends and round corners. They look soft and friendly. Sharp icons have square ends and pointed corners, so they look firm and exact. Both share one centre line, so switching between them does not move anything. Regular Rounded and Regular Sharp are both free.
Should I use outline or filled icons in a tab bar?
A common habit is an outline for the inactive tab and a filled icon for the active one. In UIX Icons that means Regular for the idle state and Solid for the selected state. Both are free. Because they come from the same drawing, the two states line up exactly.
What is the Tile style for?
Tile puts the icon at a smaller size inside a soft rounded square. It suits feature lists, menus, settings rows and app launchers, where each item needs a small block of its own. Tile is a Pro style. This page shows a sample, and a licence key opens it in the browser.
Try the styles on real icons
Switch styles in the browser. Free styles copy. Pro styles open with a licence key.
About this page
Every UIX icon comes in 15 styles, all made from one master drawing. Three are free and open source under MIT: Regular Rounded, Regular Sharp and Solid. The other twelve are Pro: thin, light and bold in rounded and sharp, plus duotone, twotone, bulk, gradient, glass and tile. Size and weight match across all of them.