toolkit.addy.codes

Icons8 is a library of icons, illustrations, and 3D assets drawn by its own designers so that styles stay consistent across formats, available for download in SVG and PNG, with an MCP server for AI agents and coding tools. It fits designers who need a matching set fast — a UI, a deck, or a landing page — and who want vector files they can still edit. It is less suited to work that requires a fully custom visual language, since ready-made assets carry the house style of whichever set you pick.

Start by matching the asset style to the project

The fastest way to waste time is to pick assets one at a time by look. Decide the style first, then filter everything to that style.

The consistency claim in Icons8's own description — icons and illustrations "drawn by our own designers so every style matches" — is the practical reason to filter by one style across all three asset types rather than mixing a 3D illustration with an outline icon set.

Pick the file format by what happens next

• SVG — editable vector. Use it when the asset will be recolored, resized without loss, animated, or handed to a developer. This is the default for UI work.
• PNG — raster. Use it for quick mockups, slides, and anywhere you cannot paste or render vector files.

If you are unsure, download SVG. You can always export a PNG from it later; you cannot cleanly go the other way.

Keep a set consistent

1. Choose one style (for example, a single outline weight) before searching.
2. Filter icons, illustrations, and 3D to that same style so a page does not mix visual languages.
3. Reuse the same icon for the same meaning across screens — a second "settings" icon in a different style is a common slip.
4. Check the set covers your edge cases (empty states, errors, onboarding) before committing, not after you have built ten screens.

Check licensing and pricing before client work

Icons8 lists a pricing page, which is the place to confirm what a given use requires. Before shipping assets in client or commercial work, verify the license terms for the specific asset and plan rather than assuming downloads are unrestricted. Pricing and plan details are not covered here — check the site directly, since terms and prices change.

Getting assets into your workflow

• Figma and design tools — SVG imports as editable vector layers, so you can recolor and resize inside the file.
• Web — SVG inline or as a file keeps icons sharp at any size and lets CSS control color.
• Presentations — PNG avoids font and vector rendering issues in slide software.

Icons8 also offers an MCP server for AI agents and coding tools, which is relevant if you are wiring asset lookup into an automated or agent-driven workflow rather than browsing manually.

Customize or download ready-made?

Download ready-made when the asset is generic — a search icon, a folder, a chart — and speed matters more than uniqueness. Customize (recolor, adjust stroke, simplify) when the asset sits in a branded context or appears at large size where its original style would clash. Build fully custom only when the visual language itself is the product, since that is where a shared library stops helping.

Addy's Web Dev Toolkit is a hand-picked directory of tools and resources for people who build websites, currently listing 755 links. It differs from a search engine or an automated aggregator in two ways: every entry is manually selected, and every entry is placed into a themed section rather than dumped into one flat list. That makes it most useful when you want a short, pre-filtered set of options for a specific task — for example, picking an image compressor, an easing function, or a font source — instead of scrolling through search results.

What "hand-picked" actually means here

The site describes itself as "a lovingly curated collection of tools, resources, and inspiration for designers and developers. No fluff, just the good stuff." The selection model is editorial, not algorithmic:

• Manual curation. Entries are chosen by a person, not scraped or auto-ranked by traffic.
• A visible, growing count. The page shows "755 links and counting," so the collection is maintained rather than frozen.
• A "Newest additions" section. Recently added tools appear at the top, which tells you the directory is actively updated.

The practical consequence: you get fewer results than a search engine, but each result has already passed a relevance filter. The trade-off is that you're trusting one curator's judgment, and coverage will be narrower than a general search.

How the collection is organized

Entries are grouped into themed sections rather than sorted by category alone. The headings visible on the page include:

Some sections carry a "View all" link with a count — for example, "Get inspired" shows "View all 73." That means a section can hold far more entries than the handful previewed on the main page, so the visible cards are a sample, not the full section.

What each entry tells you

Every listing follows the same compact format, which is what makes the directory scannable:

• Name — e.g. TinyPNG, CSS Zen Garden, Debuggex.
• A one-line description of what it does.
• A free/paid label — the entries shown are marked "Free."
• An external link that opens the tool itself.
• An info icon for additional detail.

Examples from the "Newest additions" section show the range:

• TinyPNG — image compression and conversion for AVIF, WebP, PNG, and JPEG without visible quality loss.
• CSS Zen Garden — a long-running demonstration of how the same HTML can look radically different by changing only the stylesheet.
• Easing Functions Cheat Sheet — an interactive comparison for choosing animation easing functions.
• Debuggex — a visual regular expression tester and debugger with match visualisation and reusable regex.
• My OG Image — a free Open Graph image generator with editable templates and PNG, JPEG, or WebP export.
• VS Code Themes — browse and preview themes by language, dark/light variant, and popularity before installing.

Notice the pattern: each entry answers "what is this and what does it do" in one line, then gets out of the way. There's no long review to read before you decide whether to click.

When this directory is worth using

Use it when:

• You need a tool for a specific, well-defined job (compress images, test a regex, generate an OG image) and want a vetted shortlist rather than ten browser tabs of search results.
• You want inspiration or learning material and would rather browse a curated gallery than a feed.
• You care about the free/paid label being visible before you click.

Look elsewhere when:

• You need something niche or very new — a 755-link collection can't cover everything, and a search engine will reach further.
• You want comparison data like pricing tiers or feature matrices; the entries give a description and a free/paid tag, not a side-by-side breakdown.
• You need guaranteed freshness on a specific tool — the "Newest additions" section shows recent picks, but individual entries don't display a last-checked date.

A quick way to use it

1. Open the toolkit and scan the section headings to find the theme closest to your task.
2. Read the one-line descriptions in that section — this is usually enough to shortlist two or three.
3. Check the free/paid label against your constraints.
4. Click through to the tool via its external link and evaluate it in context.

If nothing in the previewed cards fits, follow the "View all" link for that section before giving up on it — the preview only shows a fraction of what's inside.

Addy's Web Dev Toolkit is a curated directory of 755 hand-picked tools and resources for people who build websites, organized into categories such as newest additions, inspiration, learning, design tools, and icons. If you want to know whether it covers a specific need — image optimization, fonts, regex debugging, animation timing, or design inspiration — the sections below map the main types of entries you'll find, based on the site's own listings.

Design and visual tools

These entries handle the visual production side of building a site, from compressing assets to generating graphics.

The pattern here is practical output: you bring a file or a description, and the tool returns a compressed image, a social preview, a vector, or a diagram.

Fonts and typography resources

Typography entries lean toward free licensing and browsability rather than commercial font marketplaces.

• Free Faces Gallery — a curated collection of typefaces under a variety of free licences, organized by style for easy browsing.
• Dirtyline Studio Freebies — a collection of free display and handwritten fonts.

If your project needs a display or handwritten face and you want to stay within free licensing, these two are the direct starting points in the directory.

Developer utilities

These are the debugging and reference tools that support day-to-day front-end work.

• Debuggex — a visual regular expression tester and debugger with match visualization, test data, unit tests, and a reusable regex library.
• Easing Functions Cheat Sheet — an interactive reference for comparing and choosing easing functions that control the rate of change in animations.
• VS Code Themes — browse and preview Visual Studio Code themes across languages, dark and light variants, popularity, and installation counts before installing.

Each one solves a comparison or verification problem: which regex actually matches, which easing curve produces the motion you want, which theme you'll be looking at all day.

Inspiration and learning content

The directory also carries a "Get inspired" section described as galleries, showcases, and creative sparks, with 73 entries in that category.

• CSS Zen Garden — a long-running demonstration showing how radically different visual designs can be created from the same HTML by changing only the stylesheet. It appears both as a newest addition and as an inspiration/learning entry.

This category is for when you need a reference point or a demonstration of technique rather than a tool that processes an input.

How to decide if it fits your need

Use the category structure as your filter:

• Optimizing or generating assets → design and visual tools (TinyPNG, My OG Image, VectorAI, Archify).
• Choosing typefaces under free licences → font and typography resources.
• Debugging or configuring your editor and animations → developer utilities.
• Looking for technique demonstrations or creative direction → inspiration and learning.

The site describes itself as "no fluff, just the good stuff," and the entries above are labeled Free where the listing shows a cost signal. The directory does not present pricing tiers or login requirements in the material available, so treat each linked tool's own terms as the authority before relying on it in a production workflow.

Addy's Web Dev Toolkit is a curated directory of 755 links for people who build websites, organized into task-based sections rather than a single searchable database. To find a specific tool, start from the section that matches your task (design, icons, inspiration, learning), check "Newest additions" if you want recent entries, and use the "View all" link inside a category to see its full set. Each listing links out to the tool's own site, so the toolkit itself is a navigation layer, not a workspace.

Start from the section that matches your task

The toolkit groups entries by what you're trying to do, not by tool type. Visible sections include:

• Newest additions — the latest hand-picked tools and resources
• Get inspired — galleries, showcases, and creative sparks (73 entries in this category)
• Level up — learning-oriented resources
• Design tools — tools for visual and interface work
• Icons galore — icon sets and related assets

If your task is "I need an icon set," go to Icons galore. If it's "I need a font," the design-adjacent sections and Newest additions are the better entry points. Matching your task to the section name is faster than scanning the whole list.

Use "Newest additions" when you want recent entries

The Newest additions section surfaces the most recently hand-picked items, which is useful when you already know the common tools in a category and want something newer. Examples currently listed there:

"Free" here reflects the label shown on each listing, not a guarantee about every feature or future pricing.

Follow "View all" to see a full category

Category sections show a preview rather than the complete set. The "Get inspired" section, for example, displays a subset and offers a View all 73 link. Clicking that expands the category to its full list. If a section looks short, it's almost certainly truncated — use the View all link before concluding a tool isn't listed.

Open a tool by clicking its external link

Each listing is a card with a name, a short description, and an open_in_new external link. The toolkit does not host the tools; clicking through takes you to the tool's own site, where you actually use it. Some cards show "No preview" with an image placeholder — that only means no thumbnail was captured, not that the link is broken.

A practical browsing sequence

1. Identify your task in one phrase (e.g., "compress images," "pick an easing curve," "find free fonts").
2. Jump to the matching section heading.
3. If nothing fits, check Newest additions — recent picks often cover niche needs.
4. If the section looks incomplete, click View all to expand it.
5. Click the external link on the card to open the tool and evaluate it on its own site.

Common snags

• Treating it as a search engine. The page is organized by curated sections; there's no indication of a keyword search box, so browsing by category is the intended path.
• Stopping at the preview. Sections are truncated by design. Missing the View all link is the most likely reason a tool seems absent.
• Reading "No preview" as unavailable. It's a missing thumbnail, not a dead entry.
• Assuming "Free" covers everything. The label appears on listings, but each tool's own site defines its actual terms.

Addy's Web Dev Toolkit is a curated directory of 755 hand-picked tools and resources for web designers and developers. It is aimed at people who build websites and want a pre-filtered, no-fluff selection rather than a search engine's worth of options. Each listing links out to an external site, and many are marked "Free." Use it when you want to discover a tool for a specific task — compressing images, generating Open Graph previews, choosing animation easing, or testing a regex — without wading through low-quality results.

What you'll find inside

The toolkit is organized around the kinds of tasks that come up when building a site. From the page evidence, the visible categories include:

• Newest additions — the latest hand-picked tools and resources
• Get inspired — galleries, showcases, and creative sparks (73 items in this section alone)
• Level up — learning resources
• Design tools
• Icons galore

Each entry follows a consistent pattern: a name, a short description of what it does, a "Free" tag where applicable, and an external link. There are no long reviews or tutorials on the site itself — it is a jumping-off point, not a manual.

Examples of what's listed

The "Newest additions" section gives a concrete sense of the range:

Who it's for

The toolkit suits two broad groups:

• Designers looking for typefaces, icons, inspiration galleries, and visual asset generators
• Developers looking for utilities like image compression, regex debugging, theme browsing, and diagram generation

It is less useful if you already know exactly which tool you need, or if you want in-depth documentation and comparisons. The value here is discovery and filtering, not depth.

How to use it

1. Open the toolkit and scan the category that matches your task (design, icons, inspiration, learning).
2. Read the one-line description to judge fit.
3. Check the "Free" tag if cost matters to you — note that the tag reflects the listing's own label, and you should confirm licensing and limits on the destination site.
4. Follow the external link to the actual tool.

Because every entry points off-site, treat the toolkit as an index. Verify current pricing, licence terms, and account requirements on the tool's own page before committing to it in a project.