Skip to contents

Create a <svg></svg> tag to render an icon.

Usage

ph(
  name,
  weight = c("light", "regular", "thin", "bold", "fill"),
  fill = "currentColor",
  rotate = NULL,
  height = "1.33em",
  width = NULL,
  vertical_align = "-0.25em",
  title = name,
  ...
)

Arguments

name

Name of the icon to use.

weight

Weight of icon (from thinnest to thickest): thin, light (default), regular, bold or fill.

fill

Fill color for the icon, default is currentColor which should match the color of the text where the icon is used.

rotate

Numeric, angle to rotate the icon.

height, width

Height and width in valid CSS unit.

vertical_align

Vertical alignment for the icon, this depend on the size of the icon.

title

Add a <title> tag to provides an accessible, short-text description of the icon. Use NULL for no title.

...

Attributes passed to the SVG tag.

Value

An SVG tag.

Examples

library(phosphoricons)

ph("airplane-tilt")
#> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" class="phosphor-svg" height="1.33em" fill="currentColor" style="vertical-align:-0.25em;">
#>   <path d="M214.8,83.5a30,30,0,0,0-44-40.7,3.9,3.9,0,0,0-.8,1L142.3,73,58.1,42.4a5.9,5.9,0,0,0-6.3,1.4l-24,24A6,6,0,0,0,26,72.6,6.1,6.1,0,0,0,28.7,77l65.9,43.9L77.5,138H56a5.6,5.6,0,0,0-4.2,1.8l-24,24a5.7,5.7,0,0,0-1.6,5.6,5.8,5.8,0,0,0,3.9,4.3l39,13.2,13.2,39a5.8,5.8,0,0,0,4.3,3.9l1.4.2a5.6,5.6,0,0,0,4.2-1.8l24-24A5.6,5.6,0,0,0,118,200V178.7l17.1-15.6L179,227.4a6.4,6.4,0,0,0,4.4,2.6,6,6,0,0,0,4.8-1.8l24-24a5.9,5.9,0,0,0,1.4-6.3L183,113.7l30.8-28.9A6.4,6.4,0,0,0,214.8,83.5Zm-10.1-6.8-.4.5-32.4,30.4a5.9,5.9,0,0,0-1.5,6.5l30.7,84.4-16.2,16.1-43.8-64a5.8,5.8,0,0,0-4.2-2.5h-.7a5.9,5.9,0,0,0-4,1.6l-24.2,22a5.7,5.7,0,0,0-2,4.4v21.5L90.6,212.9,79.5,180.2a5.8,5.8,0,0,0-3.8-3.7L43.1,165.4,58.5,150H80a5.6,5.6,0,0,0,4.2-1.8l24-24a6,6,0,0,0,1.8-4.8,6.1,6.1,0,0,0-2.7-4.4L41.4,71.1,57.5,54.9l84.4,30.7a5.9,5.9,0,0,0,6.5-1.5l31.7-33.5.2-.3a18,18,0,0,1,24.4,26.4Z"></path>
#>   <title>airplane-tilt-light</title>
#> </svg>
ph("airplane-tilt", weight = "thin")
#> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" class="phosphor-svg" height="1.33em" fill="currentColor" style="vertical-align:-0.25em;">
#>   <path d="M211.8,44.2a28.1,28.1,0,0,0-39.6,0c-.2.3-.5.5-.6.8L142.9,75.3,57.4,44.2a4.1,4.1,0,0,0-4.2,1l-24,24a3.9,3.9,0,0,0,.6,6.1l67.9,45.3L78.3,140H56a3.6,3.6,0,0,0-2.8,1.2l-24,24a3.9,3.9,0,0,0-1.1,3.7,4,4,0,0,0,2.6,2.9l40,13.5,13.5,40a4,4,0,0,0,2.9,2.6H88a3.8,3.8,0,0,0,2.8-1.2l24-24A3.6,3.6,0,0,0,116,200V177.8l19.5-17.7,45.2,66.2a4.2,4.2,0,0,0,2.9,1.7,3.8,3.8,0,0,0,3.2-1.2l24-24a4.1,4.1,0,0,0,1-4.2l-31.1-85.5,31.7-29.8.7-.9A28.1,28.1,0,0,0,211.8,44.2Zm-5.7,33.9-.3.4-32.5,30.6a4.1,4.1,0,0,0-1.1,4.3L203.4,199l-18.8,18.8-45.1-66a4.3,4.3,0,0,0-2.8-1.8h-.5a3.9,3.9,0,0,0-2.7,1.1L109.3,173a4.3,4.3,0,0,0-1.3,3v22.3L89.7,216.6,77.6,180.9a3.9,3.9,0,0,0-2.5-2.5L39.4,166.3,57.7,148H80a3.6,3.6,0,0,0,2.8-1.2l24-24a3.9,3.9,0,0,0-.6-6.1L38.3,71.4,57,52.6l85.6,31.2a4.1,4.1,0,0,0,4.3-1.1l31.7-33.5.3-.3a20,20,0,0,1,27.2,29.2Z"></path>
#>   <title>airplane-tilt-thin</title>
#> </svg>
ph("airplane-tilt", weight = "bold")
#> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" class="phosphor-svg" height="1.33em" fill="currentColor" style="vertical-align:-0.25em;">
#>   <path d="M190,115.3l27.9-26.1,1.7-2.1a36,36,0,0,0-53.1-48.6L165.3,40,140.7,66,60.1,36.7a12,12,0,0,0-12.6,2.8l-24,24A12.2,12.2,0,0,0,25.3,82l59.9,39.9L75,132H56a12.3,12.3,0,0,0-8.5,3.5l-24,24a12,12,0,0,0,4.7,19.9l36.1,12.2,12.3,36.3a12.2,12.2,0,0,0,8.7,7.8,12.4,12.4,0,0,0,2.7.3,12,12,0,0,0,8.5-3.5l24-24A12.3,12.3,0,0,0,124,200V181.3l10.1-9.1,40,58.6a12.1,12.1,0,0,0,18.4,1.7l24-24a12,12,0,0,0,2.8-12.6Zm-4.3,90-39.6-58a12.1,12.1,0,0,0-8.5-5.2h-1.4a12,12,0,0,0-8.1,3.1l-24.2,22A12,12,0,0,0,100,176v19l-6.8,6.9-8-23.6a12.1,12.1,0,0,0-7.5-7.5l-23.6-8L61,156H80a12.3,12.3,0,0,0,8.5-3.5l24-24a12.2,12.2,0,0,0-1.8-18.5L50.8,70.1l8.3-8.2,80.8,29.4a12,12,0,0,0,12.8-3.1l31.7-33.5c.1,0,.1,0,.1-.1a12.2,12.2,0,0,1,16,.9,12,12,0,0,1,0,17c-.2.2-.4.3-.5.5l-32.2,30.3a12,12,0,0,0-3.1,12.8l29.4,80.8Z"></path>
#>   <title>airplane-tilt-bold</title>
#> </svg>
ph("house")
#> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" class="phosphor-svg" height="1.33em" fill="currentColor" style="vertical-align:-0.25em;">
#>   <path d="M208,222H160a14,14,0,0,1-14-14V160a2,2,0,0,0-2-2H112a2,2,0,0,0-2,2v48a14,14,0,0,1-14,14H48a14.3,14.3,0,0,1-9.9-4.1A14.1,14.1,0,0,1,34,208V115.5a13.9,13.9,0,0,1,4.6-10.3l80-72.8a14.1,14.1,0,0,1,18.8,0l80,72.8a13.9,13.9,0,0,1,4.6,10.3V208a14,14,0,0,1-14,14Zm-96-76h32a14,14,0,0,1,14,14v48a2,2,0,0,0,2,2h48a2.1,2.1,0,0,0,2-2V115.5a1.8,1.8,0,0,0-.6-1.4L129.3,41.3a1.9,1.9,0,0,0-2.6,0l-80,72.8a1.6,1.6,0,0,0-.7,1.4V208a2.1,2.1,0,0,0,2,2H96a2,2,0,0,0,2-2V160A14,14,0,0,1,112,146Z"></path>
#>   <title>house-light</title>
#> </svg>
ph("house", fill = "#F45B69")
#> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" class="phosphor-svg" height="1.33em" fill="#F45B69" style="vertical-align:-0.25em;">
#>   <path d="M208,222H160a14,14,0,0,1-14-14V160a2,2,0,0,0-2-2H112a2,2,0,0,0-2,2v48a14,14,0,0,1-14,14H48a14.3,14.3,0,0,1-9.9-4.1A14.1,14.1,0,0,1,34,208V115.5a13.9,13.9,0,0,1,4.6-10.3l80-72.8a14.1,14.1,0,0,1,18.8,0l80,72.8a13.9,13.9,0,0,1,4.6,10.3V208a14,14,0,0,1-14,14Zm-96-76h32a14,14,0,0,1,14,14v48a2,2,0,0,0,2,2h48a2.1,2.1,0,0,0,2-2V115.5a1.8,1.8,0,0,0-.6-1.4L129.3,41.3a1.9,1.9,0,0,0-2.6,0l-80,72.8a1.6,1.6,0,0,0-.7,1.4V208a2.1,2.1,0,0,0,2,2H96a2,2,0,0,0,2-2V160A14,14,0,0,1,112,146Z"></path>
#>   <title>house-light</title>
#> </svg>
ph("cake", rotate = 45)
#> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" class="phosphor-svg" height="1.33em" fill="currentColor" style="vertical-align:-0.25em;transform:rotate(45deg);">
#>   <path d="M206,82H134V68.1c11.6-4.9,18.3-11.9,20.1-21.1C158,26.7,134.6,5.8,131.9,3.5a5.8,5.8,0,0,0-7.7-.1,93.8,93.8,0,0,0-12.7,13.2c-8.6,11.1-12.1,21.2-10.4,30.2s8.8,16.5,20.9,21.4V82H50a30.1,30.1,0,0,0-30,30v13.3a41.5,41.5,0,0,0,12.3,29.3l1.7,1.5V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V156.1l1.7-1.5A41.5,41.5,0,0,0,236,125.3V112A30.1,30.1,0,0,0,206,82ZM112.9,44.6c-1.8-9.3,8.2-21.6,15-28.4a89.7,89.7,0,0,1,6.8,8c4.2,5.6,8.9,13.7,7.6,20.6-1,5.2-5.8,9.5-14.3,12.8C119,54.3,113.9,49.9,112.9,44.6ZM210,208a2,2,0,0,1-2,2H48a2,2,0,0,1-2-2V163.4A39.1,39.1,0,0,0,60.8,166,40.5,40.5,0,0,0,94,147a39.9,39.9,0,0,0,68,0,40.5,40.5,0,0,0,33.2,19h.8a39.1,39.1,0,0,0,14-2.6Zm14-82.7a29.3,29.3,0,0,1-8.7,20.7,27.7,27.7,0,0,1-19.8,8A28.2,28.2,0,0,1,168,126a6,6,0,0,0-12,0,28,28,0,0,1-56,0,6,6,0,0,0-12,0,28.2,28.2,0,0,1-27.5,28,27.7,27.7,0,0,1-19.8-8A29.3,29.3,0,0,1,32,125.3V112A18.1,18.1,0,0,1,50,94H206a18.1,18.1,0,0,1,18,18Z"></path>
#>   <title>cake-light</title>
#> </svg>
ph("airplane-tilt", height = 128)
#> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" class="phosphor-svg" height="128px" fill="currentColor" style="vertical-align:-0.25em;">
#>   <path d="M214.8,83.5a30,30,0,0,0-44-40.7,3.9,3.9,0,0,0-.8,1L142.3,73,58.1,42.4a5.9,5.9,0,0,0-6.3,1.4l-24,24A6,6,0,0,0,26,72.6,6.1,6.1,0,0,0,28.7,77l65.9,43.9L77.5,138H56a5.6,5.6,0,0,0-4.2,1.8l-24,24a5.7,5.7,0,0,0-1.6,5.6,5.8,5.8,0,0,0,3.9,4.3l39,13.2,13.2,39a5.8,5.8,0,0,0,4.3,3.9l1.4.2a5.6,5.6,0,0,0,4.2-1.8l24-24A5.6,5.6,0,0,0,118,200V178.7l17.1-15.6L179,227.4a6.4,6.4,0,0,0,4.4,2.6,6,6,0,0,0,4.8-1.8l24-24a5.9,5.9,0,0,0,1.4-6.3L183,113.7l30.8-28.9A6.4,6.4,0,0,0,214.8,83.5Zm-10.1-6.8-.4.5-32.4,30.4a5.9,5.9,0,0,0-1.5,6.5l30.7,84.4-16.2,16.1-43.8-64a5.8,5.8,0,0,0-4.2-2.5h-.7a5.9,5.9,0,0,0-4,1.6l-24.2,22a5.7,5.7,0,0,0-2,4.4v21.5L90.6,212.9,79.5,180.2a5.8,5.8,0,0,0-3.8-3.7L43.1,165.4,58.5,150H80a5.6,5.6,0,0,0,4.2-1.8l24-24a6,6,0,0,0,1.8-4.8,6.1,6.1,0,0,0-2.7-4.4L41.4,71.1,57.5,54.9l84.4,30.7a5.9,5.9,0,0,0,6.5-1.5l31.7-33.5.2-.3a18,18,0,0,1,24.4,26.4Z"></path>
#>   <title>airplane-tilt-light</title>
#> </svg>
ph("airplane-tilt", height = 128, weight = "fill")
#> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" class="phosphor-svg" height="128px" fill="currentColor" style="vertical-align:-0.25em;">
#>   <path d="M215.1,86.2l-29.8,28,30.2,83.1a7.9,7.9,0,0,1-1.8,8.4l-24,24a8.5,8.5,0,0,1-6.4,2.3,8.1,8.1,0,0,1-5.9-3.5l-42.6-62.3L116,183.5V204a8.1,8.1,0,0,1-2.3,5.7l-20,20A8.3,8.3,0,0,1,88,232l-1.8-.2a8,8,0,0,1-5.8-5.2L67.5,188.5,29.4,175.6a8,8,0,0,1-5.2-5.8,8.3,8.3,0,0,1,2.1-7.5l20-20A8.1,8.1,0,0,1,52,140H72.7l18.7-18.8L27.6,78.7A8.4,8.4,0,0,1,24,72.8a8.2,8.2,0,0,1,2.3-6.5l24-24a7.9,7.9,0,0,1,8.4-1.8l83.1,30.2,26.6-28.2a5.2,5.2,0,0,1,1-1.1,32,32,0,0,1,47,43.3A6.4,6.4,0,0,1,215.1,86.2Z"></path>
#>   <title>airplane-tilt-fill</title>
#> </svg>
ph("airplane-tilt", height = 128, weight = "fill", fill = "steelblue")
#> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" class="phosphor-svg" height="128px" fill="steelblue" style="vertical-align:-0.25em;">
#>   <path d="M215.1,86.2l-29.8,28,30.2,83.1a7.9,7.9,0,0,1-1.8,8.4l-24,24a8.5,8.5,0,0,1-6.4,2.3,8.1,8.1,0,0,1-5.9-3.5l-42.6-62.3L116,183.5V204a8.1,8.1,0,0,1-2.3,5.7l-20,20A8.3,8.3,0,0,1,88,232l-1.8-.2a8,8,0,0,1-5.8-5.2L67.5,188.5,29.4,175.6a8,8,0,0,1-5.2-5.8,8.3,8.3,0,0,1,2.1-7.5l20-20A8.1,8.1,0,0,1,52,140H72.7l18.7-18.8L27.6,78.7A8.4,8.4,0,0,1,24,72.8a8.2,8.2,0,0,1,2.3-6.5l24-24a7.9,7.9,0,0,1,8.4-1.8l83.1,30.2,26.6-28.2a5.2,5.2,0,0,1,1-1.1,32,32,0,0,1,47,43.3A6.4,6.4,0,0,1,215.1,86.2Z"></path>
#>   <title>airplane-tilt-fill</title>
#> </svg>