Genesis - How to add a Threads icon to your theme

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

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

How to add a Threads 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 THREADS PROFILE" target="_blank" aria-label="Threads" alt="Threads">
<span class="social"><i class="threads-svg">
<svg height="14px" width="14px" viewbox="0 0 448 512"><g fill="#000000">
<path d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .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 Threads icon in a different position relative to the other icons. The different icon sections should be easy to discern – just paste the Threads icon code in between two existing icon sections.

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

First line: You'll replace LINK TO YOUR THREADS PROFILE with the link/URL of your Threads 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 Threads icon

If you'd like to add a hover color to your Threads 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.