Every web designer and developer accumulates a toolkit over time — the browser extensions, font libraries, icon sets, and small utilities that quietly make the job easier. This roundup collects the best free (or very low-cost) tools and resources worth knowing about in 2026, including some long-standing favourites and a handful of newer additions.
Whether you work primarily in web design or web development, there should be something useful here.
Fontanello
Fontanello is a Chrome extension that lets you inspect the font styles of any text on a page with a simple right-click. It instantly shows you the font name, size, line height, colour, and weight — without opening DevTools. There’s also a Firefox version. If you regularly work on client sites and need to quickly identify what’s being used typographically, this is one of the most practical extensions you can install.
PixelSnap 2
PixelSnap 2 is a Mac utility that measures anything on your screen instantly — distances between elements, component sizes, image dimensions. The measurement copies to your clipboard and works across all applications. It is a paid tool (starting at $25 for one Mac), but if you spend significant time doing design QA or reviewing builds against mockups, the time it saves pays for itself quickly.
Gradient Toggles
This CodePen by Mikael Ainalem demonstrates gradient-based toggle components with smooth animation. It’s a small but elegant example of what CSS can do with colour transitions and interaction states. Useful as a reference or starting point if you’re building custom form elements.
Mixkit
Mixkit is a library of free, high-quality stock assets — video clips, music tracks, sound effects, and illustrations — licensed for commercial use. The illustration collections are particularly useful for landing pages and hero sections when you need something polished without a budget for custom artwork. New assets are added regularly, and there’s no attribution required.
Material Icons Library
The Material Icons Library contains over 1,000 individual icons in a clean material-style design. Icons are available in SVG and PSD formats and were built for compatibility with Figma, Sketch, and Adobe XD. Good for projects where you need a large, consistent icon set without licensing costs.
Lucide Icons
Lucide is an open-source icon library with over 1,500 consistently designed icons, maintained as a community fork of Feather Icons. Each icon is available as SVG, and there are official packages for React, Vue, Svelte, and other frameworks. It has become one of the most widely used icon sets in modern web development and is a strong default choice for UI projects.
DesignGapp
DesignGapp is a straightforward tool for creating design documentation and style guides. It simplifies the process of documenting colours, typography, components, and spacing for client handovers. If you regularly deliver style guides as part of a project, it takes much of the manual work out of the process.
Coolors
Coolors is a colour palette generator that has become one of the most widely used tools in web and graphic design. Generate harmonious palettes in seconds, adjust individual colours, check contrast ratios for accessibility, and export in multiple formats. The free tier is generous. If you’re not already using it, it belongs in your bookmarks.
Giselle
Giselle is a handwriting-style script font with elegant curves and a confident weight. It works well for logo treatments, headings, and branding where you want something personal and distinctive without being overly decorative.
Isle Headline
Isle Headline is a serif typeface available in multiple weights. The free version includes a limited character set, but the full version is available for purchase. The bold weight in particular makes a strong impression at display sizes and suits editorial or lifestyle brand projects.
Ministry of Moron
Ministry of Moron is a bold, wide display typeface with a deliberately eccentric character. Uppercase only, with numbers included. Free for personal use. Works well as an attention-grabbing headline face for projects that want something with attitude.
National Park
National Park is a typeface inspired by the routed lettering used on signs in US national parks. It comes in four weights — light, regular, heavy, and outline — with a full character set. The design has a warm, outdoorsy quality that makes it distinctive without being difficult to read.
Kiko Font
Kiko is an icon font containing over 700 individual icon elements, searchable by category. Available in light, regular, and bold variants. A useful alternative to SVG icon libraries if you prefer the simplicity of icon fonts for smaller projects.
Squoosh
Squoosh is a free image compression tool built by Google Chrome Labs. Run it entirely in the browser — no upload to a server, no account needed. It supports WebP, AVIF, MozJPEG, and other modern formats, with a real-time side-by-side comparison showing the quality difference at each compression level. If you’re optimising images manually before uploading to a client site, this is the most capable free tool available.
Where to Find More
Good resources for staying up to date with new tools and design work:
- Awwwards — curated showcase of the best-designed websites globally
- Dribbble — UI design inspiration and designer community
- Codrops — tutorials and experiments in CSS and JavaScript, consistently high quality
- Smashing Magazine — in-depth articles on web design, UX, and development
For a deeper understanding of the language and concepts used in modern web design, see our comprehensive guide to Web Design Terminology.
If you’re working on a web project and want to make sure the design and technical foundation are solid, take a look at the services page or get in touch directly. You might also find these articles useful:
With over two decades of web design and development expertise, I craft bespoke WordPress solutions at FallingBrick, delivering visually striking, high-performing websites optimised for user experience and SEO.
