Genesis - How to add a TikTok icon to your theme

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

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

How to add a TikTok 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 TIKTOK PROFILE" target="_blank" aria-label="Tiktok" alt="TikTok">
<span class="social"><i class="tiktok-svg">
<svg height="13px" width="13px" viewbox="0 0 448 512"><g fill="#000000">
<path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/></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 TikTok icon in a different position relative to the other icons. The different icon sections should be easy to discern – just paste the TikTok icon code in between two existing icon sections.

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

First line: You'll replace LINK TO YOUR TIKTOK PROFILE with the link/URL of your TikTok 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 13px to your desired icon height.
  • Width: Change 13px 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 TikTok icon

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