Which icons, fonts and illustrations does your screen need?
Start with a readable label and a clear next action. Add an icon if it helps people find that action, choose a font with a readable fallback, and use an illustration when it adds context.
What should work before you add any artwork?
On an invoice screen, someone should be able to tell whether they have an invoice, find its date and download it. Write those labels first. Put the empty-state explanation where the invoice list would be.
Keep the task readable on a small screen. An icon can support a label, and an illustration can support the message, while the words still carry the action.
What happens when an icon, image or font is missing?
Check that the button still says what it does and the empty state still tells people what happens next. A font fallback is the next typeface the browser can use. Choose one that keeps the text legible and leaves room for wider letters.
Try the page with the browser’s zoom and on a narrow screen. Check long labels and the characters your readers need. Give informative images a text alternative and keep decorative ones out of spoken output.
Compare tools
Scroll the table sideways to read every column.
| Tool | What you getThe kind of asset you can use in your interface. | Where it helpsThe job it can do on a screen. | What to checkHow to keep the interface understandable. | What follows the fileThe permissions or notices to check before distribution. |
|---|---|---|---|---|
| Lucide | A library of interface icons. | Give a familiar action a consistent visual cue. | Keep a visible or accessible action label. | Preserve ISC or Feather MIT notices as applicable. |
| Google Fonts | Font families and hosted stylesheet delivery. | Set the typography of real interface text. | Check fallback, long labels and needed characters. | Check the family’s license and keep required notices with files. |
| unDraw | Downloadable illustrations you can recolor. | Support the message on a screen with a relevant image. | Provide text for meaning. Mark a redundant image decorative. | Project use can be free without credit. Asset packs and integrations are restricted. |
| Iconify | Icons from many separate collections. | Find a missing symbol, then choose local assets or on-demand loading. | Keep a readable action name when an icon is missing or unclear. | Check the selected collection license separately from Iconify tooling. |
| Heroicons | A coordinated set of outline and solid SVG icons. | Use a consistent icon variant for app navigation and actions. | Give the control a clear name and check it at its final size. | MIT applies to the icon set. Preserve the license notice. |
| Fontsource | Font files and styles packaged for your app to host. | Deliver the typeface and styles your pages need with the app. | Check fallback text, weights and required characters. | Keep the selected family’s license. Fontsource code has separate terms. |
| Coolors | Color palettes and a text/background contrast checker. | Assign colors to jobs such as body text, background and buttons. | Check each actual color pair. Use a cue besides color for important states. | Check the palette terms before distributing a standalone palette or template. |
| Simple Icons | SVG brand icons. | Identify an outside service next to its name. | Keep a useful text label if a mark is unavailable. | Check the specific mark’s license and brand guidance. Project CC0 is separate. |
| Mobbin | References showing screens and flows from existing products. | Study how another app leads a person through a task. | Write the lesson down and make your own screen for that task. | Download access does not grant reuse permission for the depicted assets. |
| LottieFiles | Animation files and workspace tools. The app needs a compatible player. | Hand off a motion file for a small visual state, such as a successful save. | Keep the text visible when motion is off or the file fails. | Check the asset license, service plan and player code license separately. |
Which permissions follow the files?
Check the license of each asset before you put it on the site. Using an image on a page, bundling a font with an app, and offering a downloadable asset collection are different uses. Keep the notices and permissions that apply to each file.
Record where the file came from, which license applies and what you changed. That record makes the next redesign or handoff easier.
How can you review one screen without installing any assets?
Draw a fictional invoice list and its empty state. Work on paper with made-up text and no account or downloaded files.
- Cover the iconsRead the button label and status without pictures. Mark anything that has no clear name.
- Draw a fallbackRewrite the heading and a long name as if the text takes up more room. Check whether the next action still fits.
- Record the file choiceWrite the source and license you would check for one icon, one font and one illustration. Decide which file to leave out if it adds no information.