Genesis - How to add a Bluesky icon to your theme

The icon library used in our Genesis themes, Fontello, does not include a Bluesky icon. But fret not! You can add a custom Bluesky icon using an SVG. We'll show you how in this tutorial.

This tutorial does not apply our Kadence child themes, which have a Bluesky icon built in.

How to add a Bluesky icon

1. Go to your WordPress dashboard > Appearance > Widgets.

Note: The placement of social icons can vary widely between themes. Most themes display social icons in 2+ different widget areas, so you'll want to consult the theme documentation for your specific theme. Each theme has a "Social Icons" tutorial with in-depth instructions for your theme.

2. Locate your social icons in one of the widget areas.

3. Copy the following code:

<a href="LINK TO YOUR BLUESKY PROFILE" target="_blank" aria-label="Bluesky" alt="Blueskiy">
<span class="social"><i class="bluesky-icon">
<svg height="14px" width="14px" viewbox="0 0 640 640"><g fill="#000000">

<path d="M439.8 358.7C436.5 358.3 433.1 357.9 429.8 357.4C433.2 357.8 436.5 358.3 439.8 358.7zM320 291.1C293.9 240.4 222.9 145.9 156.9 99.3C93.6 54.6 69.5 62.3 53.6 69.5C35.3 77.8 32 105.9 32 122.4C32 138.9 41.1 258 47 277.9C66.5 343.6 136.1 365.8 200.2 358.6C203.5 358.1 206.8 357.7 210.2 357.2C206.9 357.7 203.6 358.2 200.2 358.6C106.3 372.6 22.9 406.8 132.3 528.5C252.6 653.1 297.1 501.8 320 425.1C342.9 501.8 369.2 647.6 505.6 528.5C608 425.1 533.7 372.5 439.8 358.6C436.5 358.2 433.1 357.8 429.8 357.3C433.2 357.7 436.5 358.2 439.8 358.6C503.9 365.7 573.4 343.5 593 277.9C598.9 258 608 139 608 122.4C608 105.8 604.7 77.7 586.4 69.5C570.6 62.4 546.4 54.6 483.2 99.3C417.1 145.9 346.1 240.4 320 291.1z"/></g></svg></i></span></a>

4. Paste the code right before </div> at the end of your social icons code.

Optional: If you prefer, you can place the Bluesky icon in a different position relative to the other icons. The different icon sections should be easy to discern – just paste the Bluesky icon code in between two existing icon sections.

5. Now, let's take a look at the code for your new Bluesky icon and learn how to customize it.

First line: You'll replace LINK TO YOUR BLUESKY PROFILE with the link/URL of your Blueesky profile. Be sure to include the full link, including https://

Second line: Nothing to change here; leave as-is.

Third line: There are three things that can be changed here:

  • Height: Change 14px to your desired icon height.
  • Width: Change 14px to your desired icon width.
  • Icon color: Change #000000 to your desired color hex code.

The rest: Leave as-is.

6. Save the widget, and you're all set! Repeat for any other social icon widgets on your site.

7. Optional: If your icon is not displaying perfectly in line with the other icons, click here and copy the code. Paste this at Appearance > Customize > Additional CSS.

How to add a hover color to your Bluesky icon

If you'd like to add a hover color to your Bluesky icon, this can be achieved with a simple CSS snippet.

1. Click here and copy the code.

2. Go to Appearance > Customize > Additional CSS.

3. Paste the code at the top of the box. Replace #999999 with your desired color hex code.

4. Click Publish to save.