R Shiny & FontAwesome Icons - How to Use Them in Your Dashboards
If there's one thing that can make your dashboards more intuitive to use, it's icons. High-quality SVG icons can further explain, or sometimes replace long sections of text, and give your applications a fresh look. The best part is - you don't have to be an expert designer to start using icons. With FontAwesome Icons, you can start adding better-looking elements to your Shiny dashboard today! <blockquote>Are your R Shiny apps slow? Try to <a href="https://appsilon.com/r-shiny-caching/" target="_blank" rel="noopener">cache interactive elements in R Shiny</a>.</blockquote> Today's article will be short and sweet. You'll learn how to use FontAwesome icons in R Shiny, from account registration to embedding and customizing their free icon set. <strong>Update:</strong> The inclusion of FontAwesome icons can be achieved in a simpler way with <a href="https://github.com/rstudio/fontawesome" target="_blank" rel="nofollow noopener">RStudio's fontawesome R package</a>. <a href="https://github.com/rstudio/fontawesome" target="_blank" rel="noopener"><img class="wp-image-16502 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01d2c3a154c0fa973e0db_fontawesome-r-package-for-shiny.webp" alt="Fontawesome R package logo from RStudio making it easy to use fontawesome icons in shiny" width="200" height="230" /></a> Table of contents: <ul><li><a href="#introduction">Introduction to FontAwesome Icons</a></li><li><a href="#basics">How to Use FontAwesome Icons in R Shiny</a></li><li><a href="#customize">How to Customize R Shiny FontAwesome Icons</a></li><li><a href="#summary">Summary of R Shiny FontAwesome</a></li></ul> <hr /> <h2 id="introduction">Introduction to FontAwesome Icons</h2> So, <i>what is <a href="https://fontawesome.com/" target="_blank" rel="nofollow noopener">FontAwesome?</a></i> Put simply, it's one of the largest libraries of icons used by millions of designers, developers, and content creators worldwide. <blockquote>How important are icons? Explore Appsilon's curated collection of unique <a href="https://demo.appsilon.com/" target="_blank" rel="noopener">R Shiny dashboard demos</a>.</blockquote> Thousands of icons are completely free of charge, and you can always upgrade to their premium plans if: <ul><li>Your app gets more than 10,000 monthly visits</li><li>You want access to a massive library of 13,000 icons</li><li>Want to upload your own icons</li><li>Work as a team</li></ul> There are more reasons why you might consider upgrading, but today we'll work only with the free version. To get started, head over to their <a href="https://fontawesome.com/start" target="_blank" rel="nofollow noopener">homepage</a> and enter your email address: <img class="size-full wp-image-14366" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d35d0d6008396df29cf5_919c230e_1.webp" alt="Image 1 - FontAwesome get started page" width="2818" height="2026" /> Image 1 - FontAwesome get started page A confirmation link will immediately be sent to you and you'll be redirected to the following page: <img class="size-full wp-image-14368" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d35e0d6008396df29d78_8b435b69_2.webp" alt="Image 2 - FontAwesome user account page" width="2818" height="2026" /> Image 2 - FontAwesome user account page Take note of the <code>src</code> attribute of the <code>script</code> tag you see on the screen. It's used to identify your account, and you'll have to embed it to every R Shiny app you want to use FontAwesome icons in. Once you're registered, go onto the <i>Icons</i> tab and take a look at the endless amount of icons you have at your fingertips: <img class="size-full wp-image-14370" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b2abea8644ca583e45fe7d_3.gif" alt="Image 3 - Icons available for free in FontAwesome" width="1290" height="806" /> Image 3 - Icons available for free in FontAwesome We're now done with the setup. The question remains, how can you embed FontAwesome icons in R Shiny dashboards? Let's cover that next. <h2 id="basics">How to Use FontAwesome Icons in an R Shiny App</h2> Remember the <code>script</code> tag from the previous section? Now it's time to use it. Create a basic skeleton for R Shiny applications, including imports, UI, servicer, and a call to <code>shinyApp()</code> function. Inside the <code>ui</code>, add a <code>script</code> HTML tag and copy the <code>src</code> attribute from the website. <blockquote>Want a Shiny app now? <a href="https://templates.appsilon.com/" target="_blank" rel="noopener">Download a free Shiny template from Appsilon</a>.</blockquote> You should end up with something like this: <pre><code class="language-r">ui <- fluidPage( tags$script(src = "https://kit.fontawesome.com/<you>.js") )</code></pre> To add an icon to your R Shiny dashboard, simply add an <code>i</code> tag with a CSS class obtained from the website itself. For example, here's how the plain HTML looks like for the <i>user</i> icon: <img class="size-full wp-image-14372" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d35ff914760741caba42_a1f360c1_4.webp" alt="Image 4 - HTML attribute for the User icon" width="2218" height="2182" /> Image 4 - HTML attribute for the User icon You should somehow resemble this <code><i class="fa-solid fa-user"></code> in R code. In Shiny, that's done with the following code: <pre><code class="language-r">tags$i(class = "fa-solid fa-user")</code></pre> The complete dashboard code boils down to: <pre><code class="language-r">library(shiny) <br>ui <- fluidPage( tags$script(src = "https://kit.fontawesome.com/<you>.js"), tags$div( tags$i(class = "fa-solid fa-user"), tags$span("Users") ) ) <br>server <- function(input, output, session) { } <br>shinyApp(ui, server)</code></pre> Here's what the dashboard looks like: <img class="size-full wp-image-14374" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d3608682e8fbf3714d3c_f1190cf1_5.webp" alt="Image 5 - R Shiny dashboard with a single FontAwesome icon" width="1524" height="1024" /> Image 5 - R Shiny dashboard with a single FontAwesome icon It's not technically a dashboard, since it shows a single icon and a text element - but you get the point on how to use FontAwesome icons in R. Next, let's see how to customize these icons. <h2 id="customize">How to Customize FontAwesome Icons in Shiny UI</h2> Small black icons may not suit your dashboard perfectly. For example, maybe you're building an app for a client with a blue logo and want the icon color to match. Or you want to make the icon bigger. There's nothing you can't do with some basic CSS knowledge. In R Shiny, it's best to separate CSS styles into a separate file in the <code>www</code> folder. For simplicity, we'll add styles to the existing file, which is also fine if you don't have too many elements. <blockquote>Want to build a professional Shiny UI? Try adding <a href="https://appsilon.com/input-r-shiny-input-examples/" target="_blank" rel="noopener">Microsoft's Fluent UI inputs with shiny.fluent</a>.</blockquote> To change the size of an icon, change the <code>font-size</code> style attribute. We've set it to <code>3rem</code> on the second icon. To change the color, change the <code>color</code> style attribute. We've changed it to light blue. CSS styles before the container <code>div</code> are here just to display the icons inline with a bit of padding between - don't think too much of it. Here's the entire application code: <pre><code class="language-r">library(shiny) <br>ui <- fluidPage( tags$script(src = "https://kit.fontawesome.com/<you>.js"), tags$head( tags$style(HTML(" i { padding: 0 1rem; } ")) ), tags$div( tags$i(class = "fa-solid fa-user"), tags$i(class = "fa-solid fa-user", style = "font-size:3rem;"), tags$i(class = "fa-solid fa-user", style = "font-size: 4.5rem; color:#0098f8;"), style = "padding:3rem;" ) ) <br>server <- function(input, output, session) { <br>} <br>shinyApp(ui, server)</code></pre> <img class="size-full wp-image-14376" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d360f87028844767d08b_d9f6596f_6.webp" alt="Image 6 - R Shiny dashboard with customized FontAwesome icons" width="1256" height="868" /> Image 6 - R Shiny dashboard with customized FontAwesome icons You can easily take this thing further. There are a ton of premade CSS templates for FontAwesome icons available online, but this was just enough to get you started. We encourage you to explore examples on <a href="https://codepen.io/search/pens?q=font+awesome" target="_blank" rel="nofollow noopener">codepen.io</a> - it's a great place to get your creative juices going. <hr /> <h2 id="summary">Summing up FontAwesome Icons in R Shiny Apps</h2> Yes, using custom icons in your R Shiny dashboards is that simple. All you have to do is to include an external CSS file. Then, you'll have access to many icon classes that look good out of the box. There's no one stopping you from customizing icon size, color, and other elements if the default parameters don't blend well with your theme. <blockquote>Build professional-looking Shiny apps by using <a href="https://appsilon.com/professional-shiny-app-ui/" target="_blank" rel="noopener">custom styling and layouts with imola and shiny.fluent</a>.</blockquote> Now it's time for you to shine. As a homework assignment, use FontAwesome icons to reduce the amount of text on tabs, headings, and other elements. Feel free to use any icons that you like, as long as they make sense. Feel free to share your results with us on Twitter - <a href="https://twitter.com/appsilon" target="_blank" rel="noopener">@appsilon</a>. We'd love to see what you can come up with. <blockquote>Want to show interactive maps in your dashboards? <a href="https://appsilon.com/r-shiny-google-earth-engine/" target="_blank" rel="noopener">Consider Google Earth Engine in R Shiny</a>.</blockquote>
Contact us!
.png)
