Since 2.10.0 LH 2015 draws its icons as SVG images masked in the text colour, instead of the Genericons icon font. The icons are Genericons Neue (generic icons) and Social Logos (brands), both by Automattic, plus the handset from Dashicons (WordPress), all under the GPL v2 or later. They live in the theme stylesheet (section 2.0 Icons), so no extra file is loaded.
Using the icon variables
Each icon is a CSS custom property on :root named --lh-icon-{name}. An icon pseudo-element takes its image from --lh-icon, so a site changes an existing icon (for example a social menu link) by setting only that variable in its Styles custom CSS:
.social-navigation a[href*="example.com"]:before {
--lh-icon: var(--lh-icon-link);
}
The icon is 1em square, so font-size sets its size, and it takes the text colour. A site can add icons of its own by defining another --lh-icon-{name} on :root as a percent-encoded SVG data URI.
Available icons
Generic: share, expand, collapse, menu, close, previous, next, aside, picture, gallery, video, status, quote, link, chat, audio, month, user, category, tag, comment, zoom, edit, external, heart, mail, feed, fullscreen, send-to-phone, refresh, hide, show, print, phone (a mobile phone), handset (a telephone receiver), search, download, subscribe.
Brands: codepen, dribbble, dropbox, facebook, flickr, foursquare, github, instagram, linkedin, pinterest, reddit, tumblr, twitter, vimeo, wordpress, youtube, spotify, twitch, x, mastodon, bluesky, threads, whatsapp.
Social links menu
Links in the Social Links Menu get a brand icon by URL: CodePen, Dribbble, Dropbox, Facebook, Flickr, Foursquare, GitHub, Instagram, LinkedIn, Pinterest, Reddit, Tumblr, Twitter (twitter.com), X (x.com), Mastodon (any URL containing mastodon), Bluesky (bsky.app), Threads, WhatsApp (whatsapp.com and wa.me), Vimeo, WordPress, YouTube, Spotify and Twitch. Email links get the mail icon, phone (tel:) links the handset, links ending in /feed/ the feed icon, and anything else the share icon.
