I’ve been building a little React app that uses the Semantic UI library and found myself wanting to render a custom icon.

Semantic UI describes an icon as "a glyph used to represent something else", and there are a big list of in built icons. For example, the following code renders a thumbs up icon:

I wanted to add an icon to indicate that a link would open in a new window, and came across this GitHub issue that explains how to add a custom icon. Instead of using the name property, we can use the className property to have a icon render based on our own CSS.

Ruard van Elburg explained how to render an open in new window icon in this StackOverflow answer.

We’ll first add the following CSS:

And then can use the open-new-window class to render our icon:

And we’re done!