About this set
Social icons designed for near-black interfaces, where icons made for a light page lose contrast. The glow ring is a row of dark circles with light grey icons that turn the network’s colour on hover, with a thin ring and a soft brand-coloured glow. The glass dock is a frosted bar of app-style tiles over a coloured background, using backdrop-filter, where each tile rises and grows on hover like a desktop dock; the black TikTok, Threads and X tiles get a faint inner line so they do not vanish. The profile card shows a person, Maya Okafor, with an Elsewhere list of rows for Dribbble, Behance, LinkedIn, GitHub and email, each with its handle. Dark backgrounds turn some brand colours to mud: GitHub, X, Threads and TikTok are black, and LinkedIn blue is too dark on a dark tile. Each network therefore has a –dk-glow colour, the brand colour where it keeps 3:1 against the dark tile and near-white where it does not. The Bootstrap version runs under data-bs-theme=”dark” with .btn, .card and .list-group-flush. No JavaScript.
What’s included
- Glow ring, glass dock and profile card
- Icon colours checked for 3:1 against the dark tiles
- Black brand tiles get an inner line so they stay visible
- Bootstrap version uses data-bs-theme="dark", .card and .list-group
- No JavaScript
Accessibility
Icon-only links are named by aria-label, and profile rows by the network and handle they show; the card is a labelled region and the list is labelled by its Elsewhere heading. Focus draws a 3px light outline, captions and handles use slate tones that pass 4.5:1 on the dark background, and movement and glow transitions stop under prefers-reduced-motion.
Customise it
Change #0b0f17, #111827 and #1f2937 for the background, tiles and card, and the --dk-glow and --dk-brand values in the .dk-network classes. In Bootstrap the card colours are --bs-card-* variables; in Tailwind edit the colour utilities and the [--glow] property.
