Shiny by RStudio

Create an icon

icon(name, class = NULL, lib = "font-awesome")


name Name of icon. Icons are drawn from the Font Awesome and Glyphicons" libraries. Note that the "fa-" and "glyphicon-" prefixes should not be used in icon names (i.e. the "fa-calendar" icon should be referred to as "calendar")
class Additional classes to customize the style of the icon (see the usage examples for details on supported styles).
lib Icon library to use ("font-awesome" or "glyphicon")


An icon element


Create an icon for use within a page. Icons can appear on their own, inside of a button, or as an icon for a tabPanel within a navbarPage.


icon("calendar") # standard icon
<i class="fa fa-calendar"></i>
icon("calendar", "fa-3x") # 3x normal size
<i class="fa fa-calendar fa-3x"></i>
icon("cog", lib = "glyphicon") # From glyphicon library
<i class="glyphicon glyphicon-cog"></i>
# add an icon to a submit button submitButton("Update View", icon = icon("refresh"))
<div> <button type="submit" class="btn btn-primary"> <i class="fa fa-refresh"></i> Update View </button> </div>
navbarPage("App Title", tabPanel("Plot", icon = icon("bar-chart-o")), tabPanel("Summary", icon = icon("list-alt")), tabPanel("Table", icon = icon("table")) )
<nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand">App Title</span> </div> <ul class="nav navbar-nav"> <li class="active"> <a href="#tab-7982-1" data-toggle="tab" data-value="Plot"> <i class=" fa fa-bar-chart-o fa-fw"></i> Plot </a> </li> <li> <a href="#tab-7982-2" data-toggle="tab" data-value="Summary"> <i class=" fa fa-list-alt fa-fw"></i> Summary </a> </li> <li> <a href="#tab-7982-3" data-toggle="tab" data-value="Table"> <i class=" fa fa-table fa-fw"></i> Table </a> </li> </ul> </div> </nav> <div class="container-fluid"> <div class="tab-content"> <div class="tab-pane active" data-value="Plot" data-icon-class="fa fa-bar-chart-o" id="tab-7982-1"></div> <div class="tab-pane" data-value="Summary" data-icon-class="fa fa-list-alt" id="tab-7982-2"></div> <div class="tab-pane" data-value="Table" data-icon-class="fa fa-table" id="tab-7982-3"></div> </div> </div>

See also

For lists of available icons, see and