README

The rheroicons packages brings to the Heroicons icon library, developed by Adam Wathan and Steve Schoger, as R functions for use in your R-based web projects.

All icons are rendered as inline SVG icons. Therefore, no CSS or JavaScript dependencies are loaded into your Shiny application or other web document at runtime!

Install

install.packages("rheroicons")

The main branch of this repository and the latest release will always be even with the CRAN release. All development will take place on a new branch, and then merged with main when all tests have passed. New releases may be available prior to CRAN acceptance. If this is the case, you can download the GitHub release using the following command. Please note that release may change if revisions were requested.

remotes::install_github("davidruvolo51/rheroicons@*release")

Getting Started

Finding Icons

There are over 200 icons in the collection. Each icon has three styles: outline, solid, and mini. The rheroicons package includes an icon gallery that can be used to find icons and copy the R code.

rheroicons::launch_gallery()

In the gallery, click the name of an icon to copy the R code, and then paste the R code directly into your Shiny application.

# returns all icon names
rheroicons::find_icons()

# find icons with `chevron` in the name
rheroicons::find_icons(query = "chevron")

# find icons with `chevron` OR `arrow` in the name
rheroicons::find_icons(query = "chevron|arrow")

# find icons with `down`, `up`, `left`, OR `right` in the name
rheroicons::find_icons(query = "down|up|left|right")

# find icons that end with `down`.
rheroicons::find_icons(query = "(down)$")

Rendering Icons

When you have found the icon that you would like to use, you can render them into your app or web document using the rheroicon function.

# rheroicons version of the magnifying glass circle icon
rheroicons::rheroicon(name = "magnifying-glass-circle")

Arguments

Argument	Description	Options	Default
`name`	icon name	(use `find_icon` or `launch_gallery`)	—
`type`	icon style	`outline`, `solid`, `mini`	`outline`
`class`	add your own CSS classes	—	`NULL`

library(shiny)
tags$button(
  id = "copy",
  class = "button button-copy",
  tags$span("Add to clipboard"),
  rheroicons::rheroicon(
    name = "clipboard-document",
    type="solid"
  )
)

Customizing the appearance of icons

library(shiny)
tags$button(
  id = "copy",
  class = "button button-copy",
  tags$span("Add to clipboard"),
  rheroicons::rheroicon(
    name = "clipboard-document",
    type = "solid",
    class = "button-icon"
  )
)

However, you may find it easier to use the predefined classes generated by this package. All icons have three types of CSS classes.

rheroicons::rheroicon(name = "backspace")

Icon Set	Function	CSS classes
outline	`rheroicon(name ="backspace")`	`rheroicons rheroicons-outline rheroicons-backspace`
solid	`rheroicon(name ="backspace", type = "solid")`	`rheroicons rheroicons-solid rheroicons-backspace`
mini	`rheroicon(name ="backspace", type = "mini")`	`rheroicons rheroicons-mini rheroicons-backspace`

You can select and style icons via CSS using these classes. Create a new tags$style element and define your styles (or use an external CSS file).

library(shiny)

# ui
ui <- tagList(
  tags$head(
    tags$style(

      # select all instances of rheroicons
      ".rheroicons {
        width: 50px;
        height: 50px;
      }",

      # select all outline icons (set color via the stroke property)
      ".rheroicons-outline {
        stroke: green;
      }",

      # select solid icons (set color via the fill property)
      ".rheroicons-solid {
        fill: red;
      }",

      # select specific icons
      ".rheroicons-home {
        width: 75px;
        height: 75px;
      }",

      # select specific icon of a particular style
      ".rheroicons-outline.rheroicons-home {
        stroke: yellow;
      }"
    )
  )
  # define UI here
  ...
)

Example

The following code demonstrates how to generate icons in Shiny, render solid and outlined icons, and style icons using CSS.

library(shiny)

ui <- tagList(
  tags$head(
    tags$style(
      "body {
        font-size: 16pt;
        background-color: #f6f6f6;
        font-family: Helvetica, Arial, sans-serif;
        margin: 0;
        padding: 0;
      }",
      "main {
        margin: 0 auto;
        box-sizing: content-box;
        padding: 2em;
        max-width: 972px;
      }",
      ".rheroicons {
        width: 75px;
        height: 75px;
      }",
      ".rheroicons-solid {
        fill: #2C497F; 
      }",
      ".circle-icons {
        stroke: #417B5A;
      }",
      ".rheroicons-home-modern.rheroicons-outline {
        width: 44px;
        height: 44px;
      }"
    )
  ),
  tags$main(
    tags$h2("My Shiny App"),
    tags$p("This is my cool Shiny application. Check out some of the icons"),
    tags$div(
      rheroicons::rheroicon(name = "arrow-down-circle", class="circle-icons"),
      rheroicons::rheroicon(name = "arrow-up-circle", class="circle-icons"),
      rheroicons::rheroicon(name = "arrow-left-circle", class="circle-icons"),
      rheroicons::rheroicon(name = "arrow-right-circle", class="circle-icons")
    ),
    tags$div(
      rheroicons::rheroicon(name = "musical-note", type = "solid"),
      rheroicons::rheroicon(name = "musical-note")
    ),
    tags$div(
      rheroicons::rheroicon(name = "home-modern", type = "solid"),
      rheroicons::rheroicon(name = "home-modern")
    )
  )
)

server <- function(input, output) { }
shinyApp(ui, server)