Design resources

Open source social icons without the visual clutter

Find brand icons from maintained repositories, keep their meaning clear, and build social navigation that works with a keyboard and screen reader.

Social icons are navigation. Their job is to help someone find a profile or share a page, not to become the most visually dominant part of the layout. Begin by distinguishing those two actions: a link to your account and a button to share the current article should not have the same accessible name.

This refreshed resource replaces the historical social-icon roundup. The old Komodo Media image is not bundled here, and the collections below are independent alternatives.

Repositories worth exploring

Simple Icons specializes in brand marks. It is useful for a row of recognizable services, but each mark’s trademark guidelines still matter. The availability of source artwork does not mean a company endorses your site.

Tabler Icons offers brand symbols alongside interface icons. This can help when a profile row needs to match the surrounding line-icon style. Check that the particular brand is included in the version you install.

Remix Icon is another option when you want brand and system symbols from one visual family. Check the repository’s current license before distributing the files; do not assume every icon project uses the same terms.

Use a real anchor with an href, a visible label where space permits, and an accessible name such as “OpenSourceHunter on GitHub” when the icon stands alone. A label of “GitHub icon” describes the artwork, not the destination.

Keep the tap target larger than the drawing. A 20-pixel symbol can sit inside a 44-pixel link without making the footer look oversized. Give keyboard focus a visible outline and do not remove it to match a mockup.

Avoid unnecessary third-party widgets

For simple profile links, inline SVG and ordinary anchors are enough. A large sharing widget often adds requests and tracking behavior you do not need. For sharing a URL, consider a native share action where supported and an ordinary copy-link fallback.

Limit the row to profiles you actively maintain. A short set of useful destinations is better than a wall of logos leading to empty accounts. See the companion social-button guide for the difference between sharing and following.