Free Design Resources: Icons, Fonts, Colors, Mockups
A curated GitHub list of free design resources: color schemes, icons, fonts, and mockup generators to style your landing page with an agent.
Every time I begin creating a landing page using an agent, I face the same problem. My code is perfect, but the resulting page is plain and boring since no one has chosen a color scheme, a font combo, or an icon set for it. As a result, the agent uses its default values to complete the picture.
Before I explain my design ideas, I visit some websites, select three or four elements from each site, and then send everything to the agent, so it knows what to create.
Source
gztchan/awesome-design
★ 17,573
This is a collection of high quality resources and tools used by UI/UX designers in daily work. And indeed, it’s a very long page divided into several parts: stock photos, colors, icons and logos, typography, toolkit, prototyping, mockup, and user testing. Even Apple’s Human Interface Guidelines are mentioned there (scroll down a bit). There are also design awards and podcasts. There’s no installation or execution involved here — it’s just a bunch of links categorized according to their purpose.
How to use it with your agent
I don’t read this page from beginning to end. I jump right to the four sections that deal with the basic requirements for a landing page on the very first day.
- 1Open the Color section and pick a palette from Coolors or Color Hunt, then copy the hex codes.
- 2Open Icon and Logo and grab a set from Flaticon or The Noun Project, or use Simple Icons when you need an exact brand logo.
- 3Open Typography and take two fonts from Google Fonts, one for headings and one for body text.
- 4Open Mockup and use BrowserFrame to wrap a screenshot in a browser frame for the hero section.
When I pick a color scheme, a couple of fonts, and an icon set, I send all the info to the agent at once so it doesn’t have to make assumptions or display a default theme.
Load the fonts Inter and Poppins from fonts.google.com (Inter for body text, Poppins for headings). Set the button color to #2F6FED, from a palette I picked on coolors.co. Add icons from simpleicons.org next to each feature card.
Not everything on the page is free
Under Toolkit and Prototyping, you’ll find premium tools like Figma and Sketch. So if you’re a vibe coder on a tight budget, these sections aren’t for you. But let’s talk about the sections I use. Font Squirrel (under Typography) explicitly says that its fonts are free for commercial use. Also, Simple Icons, BrowserFrame, Coolors, and Color Hunt operate on the “no registration / no payment” principle.
One page for the four things every landing page needs before it looks finished: a color palette, a font pair, an icon set, and a mockup frame for the hero screenshot. Pick one of each, hand the names to your agent, and skip the hour of searching random sites.
Source: github.com
Free course
Stop reading about AI — start building with it
The free Claude Code course: your first site, tool or game — no coding. No upsells, no cross-sells — nothing to buy here.
Start free →▌ Related guides
Author
Evgenii Arsentev
PhD · Founder & CEO, Dad4Kids
Articles · Latest articles