How to Properly Scale and Use SVG Icons in WordPress Sidebar

Question:

I’m trying to implement a set of social media buttons in my WordPress sidebar using SVG icons. I am using the theme Agama Blue (version 1.1.5). The specific issue I’m facing is scaling the Facebook and X (formerly Twitter) icons to 24×24 pixels. All the icons are set to 24×24 pixels but still look odd and out of proportion.

I have already uploaded my icons to the WordPress media library, and here are the generalized URLs for the icons:

• Facebook Icon: https://example.com/path-to-your-icons/facebook.svg
• X Icon: https://example.com/path-to-your-icons/x.svg

Additionally, I have provided a screenshot of the section of my WordPress page that shows my social links, which is causing the problem.

Here’s what I’m trying to achieve:

1. Both the Facebook and X icons need to be adjusted proportionally since for X it is bigger than the text and for Facebook it is really small .
2. The icons should not have borders.
3. The text for Facebook, X, and YouTube needs to be white.
4. On hover, I want the icons to slightly grow in size, along with the pill-shaped button.

Here is the HTML and CSS code I have so far:

<div class="social-buttons">
    <a href="mailto:[email protected]" class="social-link mail" target="_blank">
        <img src="https://example.com/path-to-your-icons/email.svg" alt="Email Icon" class="social-icon" /> Mail
    </a>
    <a href="https://www.facebook.com/example" class="social-link facebook" target="_blank">
        <img src="https://example.com/path-to-your-icons/facebook.svg" alt="Facebook Icon" class="social-icon facebook-icon" /> Facebook
    </a>
    <a href="https://x.com/example" class="social-link x" target="_blank">
        <img src="https://example.com/path-to-your-icons/x.svg" alt="X Icon" class="social-icon x-icon" /> X
    </a>
    <a href="https://youtube.com/example" class="social-link youtube" target="_blank">
        <img src="https://example.com/path-to-your-icons/youtube.svg" alt="YouTube Icon" class="social-icon" /> YouTube
    </a>
</div>

<style>
.social-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.social-link {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
    color: white;
    border: none;
    transition: transform 0.3s ease-in-out;
}

.social-link:hover {
    transform: scale(1.1);
}

.social-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    display: inline-block;
    transition: transform 0.3s ease-in-out;
    border: none;
}

.social-link:hover .social-icon {
    transform: scale(1.2);
}

.mail {
    background-color: #e0e0e0;
    color: black;
}

.facebook {
    background-color: #4267B2;
    color: white;
}

.x {
    background-color: #000000;
    color: white;
}

.youtube {
    background-color: #FF0000;
    color: white;
}

.mail .social-icon {
    filter: brightness(0);
}

.facebook .social-icon,
.x .social-icon,
.youtube .social-icon {
    filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
    .social-link {
        flex: 1 1 100%;
    }
}
</style>

Current Issues:

1. The Facebook and X icons are not scaling properly.
2. The text color for Facebook, X, and YouTube appears gray instead of white.
3. The hover effect works, but the icons sometimes don’t resize proportionally.

What I’ve Tried:

• Using filter: brightness(0) invert(1); to make the icons white.
• Adjusting the icon dimensions directly in CSS.

What I Need:

• Properly scale the SVG icons to 24×24 pixels without distortion.
• Ensure the text color for Facebook, X, and YouTube is white.
• Make the hover effect resize both the button and the icon proportionally.

How can I adjust my CSS/HTML or SVG properties to make the icons scale correctly and the text color render properly?

Thanks in advance for any help!

---