Typography and Icons

5 tools

Which Typography and Icons tool do you need?

Tool	What it answers
Icon Color Generator	Enter a base hex colour and pick the surface the icon sits on.
Icon Maker	Type up to three letters, pick a background and letter colour in hex, choose square, rounded or circle, and the icon maker writes the SVG code.
Icon Set Generator	Paste several SVG icons and the generator wraps each one in a symbol element inside a single hidden sprite.
iOS System Colors	The iOS system colours are Apple's 13 adaptive tints, from systemRed to systemGray, each with a light and a dark value.
Typography Generator	A typography generator multiplies a base font size by a fixed ratio once per step to give a consistent set of heading and text sizes.

Merge pasted SVG icons into one sprite of symbol elements, with a prefixed id and preserved viewBox for each icon and the use markup to draw it.

Look up the 13 iOS system colours by name or hex: light and dark values, RGB, HSL, SwiftUI and UIKit names. systemBlue is #007AFF in light mode.

Turn one hex colour into default, hover, pressed and disabled icon shades, each with its WCAG contrast ratio against a white or #121212 dark surface.

Build a modular type scale from a base size and ratio such as 1.25 or 1.618. Get each step in px and rem, line heights and CSS custom properties.

Make a square, rounded or circular letter icon as SVG code from up to three characters and two hex colours, with the WCAG contrast ratio worked out.