Browse icons

15 icons in code, the 2026 answers

Icons in code

The icon questions developers keep asking, answered for 2026: SVG colour and sizing, sprites, React and Next.js, favicons, email, animation and icon fonts. Old answers fixed, with the browser support checked.

A rainbow fan of paint swatch cards behind a big white card with the with icons home outline sliced into green, blue, purple, red and orange bands, next to a dark code pill reading stroke: currentColor
Icons in code · 9 min read

Change an SVG’s colour with CSS

Change an SVG icon’s colour with CSS today: currentColor for inline SVG, mask-image for img and background files, CSS variables for multi-colour icons.
A wooden picture ledge on a pale grey wall holding five oversized browser tabs standing like books, each wearing a favicon and a file label: a rocket for .ico, a cyan leaf tab for .svg, then a heart, a star and a coffee cup for 180, 192 and 512, beside the words 5 files
Icons in code · 9 min read

Favicon files for 2026

The minimal favicon set for 2026: favicon.ico, an SVG with dark mode, a 180 px Apple touch icon and 192/512 manifest icons, with the exact tags to paste.
A dark circuit board under a glowing cyan React component tree: a logo.svg file card is imported into a Logo node, and App branches to Logo, Nav and Page, whose leaves are home, search, bell and settings icons on white tiles
Icons in code · 8 min read

SVG icons in React and Next.js

Import SVG icons in React and Next.js in 2026: vite-plugin-svgr with ?react, SVGR under Turbopack in Next 16, plain img tags, and when an icon package is simpler.
A white desk with a pink ruler and paper, with the giant word Home and the with icons home icon on it, and cyan cap height, x-height and baseline guide lines running across the whole picture
Icons in code · 8 min read

Align an icon with text

Align an icon with text in CSS: inline-flex with align-items and gap, 1em icons, vertical-align -0.125em, and the new text-box trim (Baseline since August 2026).
A silver picture frame on a grey wall with a cream mat cut into two windows: in the left one a cyan blueprint home icon fits on its grid, in the smaller right one the same icon is cut off at a red dashed edge
Icons in code · 9 min read

SVG icon cut off or blurry?

Fix SVG icons that are cut off, blurry or the wrong size: what viewBox and width/height do, why icons clip or go soft, and how to keep strokes the same width.
A desk with a notebook and a laptop, split down the middle: the left half washed to paper holds a printed page of ink icons labelled Server, the right half darkened to a screen holds an app window with a glowing search box labelled Client, divided by a dashed use client line
Icons in code · 8 min read

Icons in React Server Components

Why icon libraries break or bloat React Server Components: fixing createContext and “Functions cannot be passed” errors, icons by name, and measuring bundles.
A wall of numbered wooden post office boxes, with white envelopes spilling out of one stuffed box, each stamped with a contact icon: mail, phone, globe, calendar and map pin, under a cyan 2x PNG label
Icons in code · 7 min read

SVG icons in email

SVG in email in 2026: which clients show it (Gmail now does, as a PNG), why 2x PNG is still the safe choice, plus retina sizes, dark mode and alt text.
A cream type-specimen poster over dark drawers of vintage letterpress type: its grid of serif letters has four empty tofu boxes with hex codes, and one cell fixed with a crisp cyan home icon, beside a giant tofu box
Icons in code · 9 min read

Icons showing as squares

Icon fonts showing squares or words? Find the cause (blocked font, CSP, wrong Font Awesome version, Material ligatures) and the correct 2026 setup or SVG fix.
A finger in a dark room reaching for a glowing blue tablet screen, where a small white settings icon button sits inside concentric target rings marked 24 px and 44 px, like a bullseye
Icons in code · 8 min read

Icon button size and labels

Icon button sizes for 2026: WCAG 2.2 AA asks 24 x 24 px, AAA 44, Apple 44 pt, Android 48 dp. Plus aria-label vs hidden text, aria-hidden SVGs and event.target.
Soft-focus sticker sheets behind a white with icons sticker sheet labelled sprite.svg with eleven icon stickers and their ids; the rocket sticker has been peeled off and floats along a dotted path into the empty slot of a small web page
Icons in code · 9 min read

SVG sprites in 2026

SVG sprites today: symbol and use href (xlink:href is legacy), colouring with currentColor and CSS variables, and why cross-origin sprites still fail.
Blurred spray paint cans behind a kraft paper stencil with a lightning bolt cut out of it, lifted off a white sheet where the same with icons bolt has been sprayed in bright cyan, with tags reading mask and background-color
Icons in code · 8 min read

SVG icons in CSS

Yes, you can put an SVG icon in ::before, ::after or a background. Colour it with a CSS mask and currentColor, and URL-encode data URIs instead of base64.
A blue-lit laptop keyboard close up, with an oversized white search field floating over it: the with icons search icon sits inside a dashed cyan padding box at its start, before the placeholder Search icons and a text caret
Icons in code · 8 min read

An icon inside an input field

Put a search, mail or password icon inside an input with a wrapper, an inline SVG and padding. Plus show-password buttons, clear buttons, focus colours and RTL.
Red and gold light trails from a long-exposure night photo behind a flip-book of five white pages fanned out from one pinned corner, each page showing one frame of a violet bell icon swinging as it rings
Icons in code · 9 min read

How to animate SVG icons

SMIL is not deprecated: Chrome dropped that plan in 2016. How to animate SVG icons today with CSS, SMIL, Web Animations or Lottie, and respect reduced motion.
Hands pressing the air out of a vacuum storage bag, with a puffy plush bell in an inflated clear pouch tagged 1,112 bytes and a cyan arrow to the same bell as a neat line icon sealed flat in a tight pouch tagged 281 bytes
Icons in code · 7 min read

Optimise SVG icons with SVGO

Optimise SVG icons safely with SVGO 4: what changed in June 2025, the settings that still break icons and sprites, a tested config, and SVGOMG for non-coders.
A bright room full of moving boxes behind one big open cardboard box with cyan tape and an SVG shipping label, packed with home, heart, star and bell icon tiles while a rocket tile is lowered in, and a struck-out font.woff tag left behind
Icons in code · 8 min read

Migrate from an icon font to SVG

Migrate from an icon font to SVG step by step: list your icon classes, map names, swap in components, sprites or drop-in CSS classes, then test it all.