Adding social media icons to charts with {ggplot2}

When I’ve created data visualisations with {ggplot2} recently, I’ve been adding icons with my social media details in the caption. It’s a great, concise way to put your name on your work, and make it easy for people to find your profile if they see your work elsewhere. Tanya Shapiro was the first person I saw doing this in R – so full credit to her for the inspiration!

Installing Font Awesome icons < svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> < path d="M0 0h24v24H0z" fill="currentColor"> < path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z">

The first part of adding icons to {ggplot2} that we’ll deal with is getting the icons themselves. To get social media icons such as those for LinkedIn or Mastodon, we’ll use Font Awesome icons. There are a couple of options for working with Font Awesome in R – including the {awesome} and {emoji} packages. Here, I’ve opted for a more direct approach – download the file and then load the into R.

You can download the file from the Font Awesome website at awesome.com/download. Font Awesome has multiple icon families available for download. For adding social media icons, we’re specifically interested in the Font Awesome Brands family. If you want to add other icons to your plots, feel free to download multiple families and install them in the same way.

We can load the s into R using the {syss} and {showtext} packages:

1
2
3

syss::_add(family = "Font Awesome 6 Brands",
                   regular = "path-to-/Font-Awesome-6-Brands-Regular-400.otf")
showtext::showtext_auto()

Using icons in {ggplot2} text < svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> < path d="M0 0h24v24H0z" fill="currentColor"> < path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z">

Let’s say we want to add a GitHub icon to our {ggplot2} chart caption. We first need to know the unicode for the GitHub icon. You can search for the icon you want at awesome.com/icons, and you’ll see the unicode icon in the top right of the screen. Although a Google search or ChatGPT would likely work equally well…

The unicode for the GitHub icon is f09b, and to use this in HTML code we can write it as &#xf09b. Let’s save that as a variable so we don’t have to remember it, and also save the GitHub username we want to display next to the icon as another variable.

1
2

github_icon <- "&#xf09b"
github_username <- "nrennie"

Now we need to combine our icon and username into something that {ggplot2} can understand, and we’ll do that by writing some HTML code. We can wrap the icons (and text) inside some <span> tags. This lets us specify which we want to use to display the icon – Font Awesome. You don’t need to wrap the GitHub username inside <span> tags as well, but you can if you want to change elements like family, colour or size as I’ve done below.

We can use glue() (or paste0()) to reference the variables we created with the GitHub icon and username, and include them in the HTML code:

1
2
3
4

social_caption <- glue::glue(
  "<span style='-family:\"Font Awesome 6 Brands\";'>{github_icon};</span>
  <span style='color: #E30B5C'>{github_username}</span>"
  )

And then we can pass that HTML code into the caption (or title, subtitle etc.) of our chart via the labs() function:

1
2
3

library(ggplot2)
ggplot() +
  labs(caption = social_caption)

Hmm… that’s not quite done exactly what we want. We need one more thing – a little bit of help from {ggtext}!

Formatting with {ggtext} < svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> < path d="M0 0h24v24H0z" fill="currentColor"> < path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z">

The reason our previous plot didn’t look quite as we’d hoped is because {ggplot2} doesn’t natively understand how to parse the HTML code. That where {ggtext} comes in. {ggtext} is an R package designed to improve text rendering in {ggplot2}, including providing support for using Markdown and HTML inside text elements. It’s one of my favourite {ggplot2} extension packages, and often use it for adding coloured text to the subtitle as a substitute legend.

We can specify within the theme() that the caption element should interpret the string we’ve provided as HTML or Markdown text by using element_textbox_simple():

1
2
3
4

library(ggtext)
ggplot() +
  labs(caption = social_caption) +
  theme(plot.caption = element_textbox_simple())

If you’ve added icons to the title or subtitle instead, you’d want to update the relevant theme() argument instead. You could also use element_textbox() which works very similarly but has slightly different default values or element_markdown(), if you’d prefer.

And that’s how you add social media icons to plots with {ggplot2} (and {ggtext})! You can include additional styling such as using a different for the username text, or changing the size or colour of the icons by including more options inside the <span> tags. You can also edit the basic properties using the arguments in element_textbox_simple().

If you think adding social media icons is something you’d do regularly, I’d recommend wrapping this code up into your own function. You can save the icon unicode values you’ll need so you don’t have to look them up, pass your social media usernames as arguments, and add optional arguments that control the icon colour, for example. If you want to take it one step further, you could write an R package that stores the Font Awesome files, and makes use of .onLoad() to automatically load the icon s when you call library(pkgname).

Additional resources < svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> < path d="M0 0h24v24H0z" fill="currentColor"> < path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z">

• The {ggtext} package vignettes include some more information on using HTML and Markdown in {ggplot2} text elements if you’re less familiar with these: wilkelab.org/ggtext/articles/theme_elements

• Albert Rapp has an excellent blog post on using s and icons with {ggplot2}: albert-rapp.de/posts/ggplot2-tips/08_s_and_icons

Image: giphy.com