If you’re running a WordPress site with Jetpack’s Sharing module turned on, you’ve probably noticed the default “Icon Only” sharing buttons can look a little… off. They’re functional, sure, but on narrower containers or mobile screens they tend to bunch up awkwardly, leave weird gaps, or just feel dated. The old styling relies on inline-block elements with margins, and that approach has been showing its age for years.

I recently cleaned mine up with a simple flexbox overhaul, and the difference is night and day. The buttons are evenly spaced, perfectly centered, wrap gracefully when space runs out, and actually look like they belong in 2026 rather than 2012.

Here’s exactly how I did it, step by step, so you can copy it into any theme without touching a line of PHP.

Step 1: Make sure you’re using Icon Only style

Head to Settings → Sharing in your WordPress dashboard. Under Sharing buttons, choose “Icon only” and save. That gives us the clean <ul> with no-text classes we’ll be styling.

Step 2: Add the custom CSS

Most themes let you add CSS through Appearance → Customize → Additional CSS. That works great for classic themes.

If you’re using a modern block theme (like Twenty Twenty-Four, Twenty Twenty-Five, or any Full Site Editing theme), the Additional CSS option might not appear in the Customizer anymore. Instead, do this:

Open the Site Editor (Appearance → Editor), click the Styles panel (the half-black/half-white circle icon in the top right), then choose “Additional CSS” from the dropdown or sidebar. Paste the CSS there and save.

The CSS itself is the same no matter what kind of theme you’re on:

CSS

/* Modern flexbox styling for Jetpack Sharedaddy icon-only buttons */
div.sharedaddy .sd-social-icon .sd-content ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    margin: 0;
    list-style: none;
}

div.sharedaddy .sd-social-icon .sd-content ul li {
    margin: 0;
}

div.sharedaddy .sd-social-icon .sd-content ul li a.sd-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f8f8f8;
    color: #333;
    font-size: 16px;
    transition: all 0.3s ease;
}

div.sharedaddy .sd-social-icon .sd-content ul li a.sd-button:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Clean up the empty "share-end" item */
div.sharedaddy li.share-end {
    display: none;
}

Hit save (or publish) and you’re good.

Why this feels so much better

The old inline-block method was fine back when browsers were less capable, but it comes with quirks: tiny invisible text nodes create random gaps, margins collapse unpredictably, and centering the whole row in a variable-width container is a headache.

Flexbox fixes all of that in a few lines. The gap property alone handles spacing perfectly—no more guessing margin values or worrying about the last item in the row. justify-content: center keeps everything neatly centered no matter how wide your content area is. And flex-wrap means the buttons gracefully drop to a new line on phones instead of squishing or overflowing.

I also bumped the buttons to 44×44 pixels and made them circular with a subtle background. That size is big enough for easy tapping on mobile, and the light background helps them stand out without screaming for attention. The hover effect is just a little lift and shadow—nothing flashy, but enough to feel alive.

If you want to tweak it further, play with the gap value (try 8px for tighter spacing or 16px for more breathing room), or ditch the border-radius: 50% if you prefer square buttons. You could even add brand colors on hover by targeting individual services:

CSS

.share-twitter a:hover { background: #1DA1F2; color: white; }
.share-facebook a:hover { background: #1877F2; color: white; }

But honestly, the neutral version above works beautifully on almost any theme without clashing.

That’s it—one small CSS snippet and your sharing buttons go from “meh” to something you’re actually happy to show visitors. Small details like this add up, and your readers will notice even if they can’t quite put their finger on why the site feels more polished.