Can I use these assets in commercial projects?

Yes. Every icon, pattern, gradient, shadow, loader and snippet on this page is released for free commercial and personal use, with no attribution required.

Where does the export happen?

In your browser. The SVG is built in JavaScript and rasterised with a canvas element, so nothing is uploaded and no server sees your colours or files.

What sizes can I export?

Icons export from 16px up to 1024px as SVG or PNG. The favicon action writes a complete set at 16, 32, 48, 180, 192 and 512px plus a scalable SVG.

How do I use the JSX export?

The JSX button copies a typed React component that uses currentColor and 1em sizing, so it inherits colour and font size from its parent without extra props.

Do the patterns work as CSS backgrounds?

Yes. Each pattern is copied as an inline data URI, so there is no extra network request and the tile scales, recolours and repeats like any other background image.

Are the loaders accessible?

Each loader ships with a role of status and an accessible label, and the copied snippet includes a prefers-reduced-motion block that disables the animation.

UI Assets

186 free interface assets in one place: recolourable icons and illustrations with PNG, SVG, JSX and favicon export, plus SVG background patterns, gradients, shadow scales, CSS loaders, cursors and layout snippets. Everything renders and exports in your browser.

61 assets

ColourBackground plateStroke4

Export size

Terminaldevelopment

Code bracketsdevelopment

Git branchdevelopment

Bugdevelopment

Databasedevelopment

Settings coginterface

Searchinterface

Filterinterface

Bookmarkinterface

Starinterface

Heartinterface

Userinterface

Lockinterface

Shieldinterface

Bellinterface

Calendarinterface

Clockinterface

Trashinterface

Editinterface

Eyeinterface

Gridinterface

Listinterface

Toggleinterface

Light modeweather

Dark modeweather

Cloudweather

Rainweather

Documentfiles

Folderfiles

Downloadfiles

Uploadfiles

Copyfiles

Archivefiles

Imagemedia

Playmedia

Microphonemedia

Volumemedia

Cameramedia

Mailcommunication

Chat bubblecommunication

Sharecommunication

Linkcommunication

Shopping cartcommerce

Price tagcommerce

Credit cardcommerce

Arrow rightarrows

Refresharrows

External linkarrows

Sortarrows

Boltinterface

Flaginterface

Globeinterface

Puzzledevelopment

Browser windowillustration

Bar chartillustration

Empty state boxillustration

Cloud uploadillustration

Not foundillustration

Rocket launchillustration

No resultsillustration

Mobile appillustration

What is in the library

Icons and illustrations

A stroke-based set drawn on a 64px grid across interface, arrows, files, media, communication, development, commerce and weather categories. Change the colour, stroke weight and background plate, then export a single SVG or PNG, copy a React component, copy a CSS data URI, or generate a full favicon set.

Patterns and gradients

Tileable SVG patterns with adjustable scale, stroke, opacity and background, copied as CSS, a Tailwind arbitrary value or a standalone tile. The gradient collection covers warm, cool, neutral, vivid and radial or conic sets, with an angle control and PNG or SVG export at social-card sizes.

Shadows, loaders and cursors

A six-step elevation scale plus soft, inner, glow and ring variants, previewed on light and dark backdrops. Loaders cover spinners, dots, bars and shimmer skeletons in pure CSS. The cursor reference lets you hover every keyword before you copy it.

CSS snippets

Short, dependency-free recipes for layout, text, effects, forms, accessibility and motion: auto-fit grids, fluid type, safe-area padding, gradient borders, autofill fixes, focus rings, skip links and reduced-motion guards.

How to use the exports

1. Pick the look. Set the colour, stroke weight and, for app icons, a background plate with the corner radius you want.
2. Choose a size. Use SVG wherever you can. Reach for PNG only when a target such as an app store listing or an email client demands a raster file.
3. Export or copy. JSX drops straight into a React codebase, the CSS data URI avoids an extra request, and the favicon action writes every size a modern site needs in one click.

Frequently asked questions

Can I use these assets in commercial projects?: Yes. Every icon, pattern, gradient, shadow, loader and snippet on this page is released for free commercial and personal use, with no attribution required.
Where does the export happen?: In your browser. The SVG is built in JavaScript and rasterised with a canvas element, so nothing is uploaded and no server sees your colours or files.
What sizes can I export?: Icons export from 16px up to 1024px as SVG or PNG. The favicon action writes a complete set at 16, 32, 48, 180, 192 and 512px plus a scalable SVG.
How do I use the JSX export?: The JSX button copies a typed React component that uses currentColor and 1em sizing, so it inherits colour and font size from its parent without extra props.
Do the patterns work as CSS backgrounds?: Yes. Each pattern is copied as an inline data URI, so there is no extra network request and the tile scales, recolours and repeats like any other background image.
Are the loaders accessible?: Each loader ships with a role of status and an accessible label, and the copied snippet includes a prefers-reduced-motion block that disables the animation.