New social media icon set for Oxygen - Bluesky, Mastodon and more

Download and add social media icons for Bluesky, Mastodon, Threads and Discord to your Oxygen website with this guide.

Social icons in Oxygen

WordPress builder Oxygen's Social Icons element lets you add a small selection of icons to your site: Facebook, Instagram, X/Twitter, LinkedIn and YouTube. If this doesn't give you what you need, you can use the more general 'Icon' element instead. This contains a number of additional social icons from Font Awesome including Vimeo, Pinterest, TikTok, Instagram, GitHub and WhatsApp.

But there are some notable omissions, particularly Twitter alternatives Bluesky, Mastodon and Threads - as well as Discord. I've created a small icon set containing icons for all these networks. In this article I'll talk you through downloading the icons and adding them to Oxygen.

Download the icon set

Right-click on the following file and save it to your desktop: symbol-defs.svg

Credit where it's due, I downloaded all of these icons individually from Font Awesome then used IcoMoon to combine them into an icon set.

The icons are trademarks so please check out the relevant trademark policy before using them (for example, here's Mastodon's).

Upload the icon set to Oxygen

1. In your WordPress admin, go to Oxygen > Settings
2. Click on the SVG Sets tab

3. Complete the Icon set name field. For example, you could call it 'New Social Media'
4. Click Choose File and select the symbol-defs.svg file you downloaded previously
5. Click Import SVG Set
6. If all goes well, your new set will now be listed under 'Uploaded SVG Sets'. You can Delete it from here in future if you decide you don't want it.

Use the new icons in Oxygen

Here's how to use one of the new icons in an Oxygen template:

1. Go to Oxygen > Templates
2. Find your template and click Edit with Oxygen
3. Click '+' in the top left to Add Element
4. Select the built-in Icon element

5. Click the Icon Set dropdown and select your new icon set (e.g. 'New Social Media')
6. Make sure the 'Icon' field does not contain any search text - all the icons in the set will appear

7. Click on an icon to add it to your template
8. Edit your new icon with Oxygen's Primary and Advanced settings as you would any other icon

What the icon set contains

The icon set contains six icons (two Threads, two Bluesky, one Mastodon and one Discord). You can see what they look like in the screengrab above, and the names are as follows:

• threads-brands-solid
• square-threads-brands-solid
• bluesky-brands-solid
• square-bluesky-brands-solid
• mastodon-brands-solid
• discord-brands-solid

Use these names in the 'Icon' field of Oxygen's Icon Element if you wish (as long as you have selected the correct icon set in the 'Icon Set' dropdown).