{"id":33221,"date":"2013-04-25T23:16:21","date_gmt":"2013-04-25T17:46:21","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=33221"},"modified":"2026-10-13T13:41:49","modified_gmt":"2026-10-13T08:11:49","slug":"pure-css-social-media-icons","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/","title":{"rendered":"How to Create Social Media Icons with Pure CSS (No Images) 2026"},"content":{"rendered":"<p>You can create fast-loading social media icons with pure CSS and no image files at all. Years ago we replaced the image-based social buttons in our sidebar with styled letters: Facebook became an &#8220;f&#8221; on blue, Twitter a &#8220;t&#8221; on light blue. They looked almost the same, loaded instantly and cut several server requests. The idea still works in 2026, with updated brand colours and Google+ long gone. Here&#8217;s how to make <strong>CSS social media icons<\/strong>, plus a modern inline SVG option.<\/p>\n<p><img decoding=\"async\" class=\"alignright size-full wp-image-33314\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/social-icons-css.png\" alt=\"CSS social media icons\" width=\"200\" height=\"200\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/social-icons-css.png 200w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/social-icons-css-150x150.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> Wrap a few links in a container, give each link a short text label (f, X, in, \u25b6) and a class, then style them in CSS with the brand background colour, white text, padding and <code>border-radius<\/code>. Add an <code>aria-label<\/code> to each link for accessibility. For sharper logos with no extra requests, paste inline SVG icons instead of letters.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ae32ff41375b\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ae32ff41375b\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/#Why_make_social_media_icons_with_pure_CSS\" >Why make social media icons with pure CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/#Step_1_The_HTML\" >Step 1: The HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/#Step_2_The_CSS\" >Step 2: The CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/#Modern_option_inline_SVG_icons\" >Modern option: inline SVG icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/#What_changed_since_the_original_version\" >What changed since the original version<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/#Are_CSS_icons_accessible\" >Are CSS icons accessible?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/#Can_I_use_brand_logos_freely\" >Can I use brand logos freely?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/#Do_these_icons_work_in_dark_mode\" >Do these icons work in dark mode?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Why_make_social_media_icons_with_pure_CSS\"><\/span>Why make social media icons with pure CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>No extra downloads:<\/strong> no image files or icon font to load, so nothing to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/\">lazy load<\/a>.<\/li>\n<li><strong>Sharp at any size<\/strong> and easy to recolour.<\/li>\n<li><strong>No third-party scripts<\/strong> that slow pages or track visitors.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Step_1_The_HTML\"><\/span>Step 1: The HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Add this where you want the icons, such as a Custom HTML widget or block:<\/p>\n<pre><code>&lt;div class=\"social-icons\"&gt;\n  &lt;a class=\"si facebook\" href=\"https:\/\/www.facebook.com\/yourpage\" aria-label=\"Facebook\" target=\"_blank\" rel=\"noopener\"&gt;f&lt;\/a&gt;\n  &lt;a class=\"si x\" href=\"https:\/\/x.com\/yourhandle\" aria-label=\"X (Twitter)\" target=\"_blank\" rel=\"noopener\"&gt;X&lt;\/a&gt;\n  &lt;a class=\"si linkedin\" href=\"https:\/\/www.linkedin.com\/company\/yourpage\" aria-label=\"LinkedIn\" target=\"_blank\" rel=\"noopener\"&gt;in&lt;\/a&gt;\n  &lt;a class=\"si youtube\" href=\"https:\/\/www.youtube.com\/@yourchannel\" aria-label=\"YouTube\" target=\"_blank\" rel=\"noopener\"&gt;&amp;#9654;&lt;\/a&gt;\n  &lt;a class=\"si whatsapp\" href=\"https:\/\/wa.me\/910000000000\" aria-label=\"WhatsApp\" target=\"_blank\" rel=\"noopener\"&gt;W&lt;\/a&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Step_2_The_CSS\"><\/span>Step 2: The CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Add this to <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong> or your stylesheet:<\/p>\n<pre><code>.social-icons { display: flex; gap: 8px; margin: 10px 0; }\n.si {\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 40px; height: 40px; border-radius: 50%;\n  color: #fff; font: 700 18px\/1 Georgia, serif;\n  text-decoration: none; transition: transform .15s;\n}\n.si:hover, .si:focus { transform: translateY(-2px); color: #fff; }\n.facebook { background: #1877F2; }\n.x        { background: #000; }\n.linkedin { background: #0A66C2; }\n.youtube  { background: #FF0000; font-size: 14px; }\n.whatsapp { background: #25D366; }<\/code><\/pre>\n<p>Use <code>border-radius: 6px<\/code> for rounded squares instead of circles, and change the width, height and font size for bigger icons. Georgia is a <a href=\"https:\/\/www.quickonlinetips.com\/archives\/web-safe-fonts-list\/\">web safe font<\/a>, so it renders the same everywhere.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Modern_option_inline_SVG_icons\"><\/span>Modern option: inline SVG icons<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Letters are fast, but real logos are clearer. Inline SVG gives you both: copy a brand icon&#8217;s SVG code from <a href=\"https:\/\/simpleicons.org\/\" target=\"_blank\" rel=\"noopener\">Simple Icons<\/a> (free brand icons) and paste it inside the link instead of the letter. Add this CSS:<\/p>\n<pre><code>.si svg { width: 20px; height: 20px; fill: currentColor; }<\/code><\/pre>\n<p>It is still part of the page, so no extra requests. Icon libraries such as Font Awesome are another route; here&#8217;s how to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/\">add Font Awesome icons to any website<\/a>, though they add a stylesheet and font file.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_changed_since_the_original_version\"><\/span>What changed since the original version<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Google+<\/strong> closed in 2019; its &#8220;g+&#8221; icon is gone.<\/li>\n<li><strong>Twitter<\/strong> is now X with a black brand colour.<\/li>\n<li>Facebook and LinkedIn updated their blues.<\/li>\n<li>Flexbox and <code>gap<\/code> replace manual margins, and the old <code>-webkit-<\/code>\/<code>-moz-<\/code> prefixes for border-radius are no longer needed.<\/li>\n<\/ul>\n<p>Want share buttons too? See how to make <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/11\/floating-social-share-icons-with-bootstrap\/\">floating social share icons with Bootstrap 5<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Are_CSS_icons_accessible\"><\/span>Are CSS icons accessible?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, with an <code>aria-label<\/code> on each link so screen readers announce the network name instead of &#8220;f&#8221;.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_use_brand_logos_freely\"><\/span>Can I use brand logos freely?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Brands allow their logos for linking to your profiles, but follow their guidelines and don&#8217;t alter the logo shape.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Do_these_icons_work_in_dark_mode\"><\/span>Do these icons work in dark mode?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. The brand backgrounds stay visible; for X, add a light border in dark mode.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can create fast-loading social media icons with pure CSS and no image files at all. Years ago we replaced&#8230;<\/p>\n","protected":false},"author":4,"featured_media":33314,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6,111],"tags":[52,49],"class_list":["post-33221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","category-social-media","tag-popular","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/33221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=33221"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/33221\/revisions"}],"predecessor-version":[{"id":65476,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/33221\/revisions\/65476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/33314"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=33221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=33221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=33221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}