Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

Difference between revisions of "Roll20 UI Icons"

From Roll20 Wiki

Jump to: navigation, search
(transclude from Help:Contents)
 
(cleanup msg)
 
(3 intermediate revisions by one user not shown)
Line 4: Line 4:
  
 
</noinclude>
 
</noinclude>
 +
{{cleanup-msg|Needs to add the New Roll20 icons both for toolbox (right), and for the sidebar(left)|March 2023}}
 
* '''[[Sidebar]]'''
 
* '''[[Sidebar]]'''
** <span style="font-family:Pictos;">q</span> <code><nowiki><span style="font-family:Pictos;">q</span></nowiki></code> [[Text Chat]] tab
+
** <span style="font-family:Pictos;">q</span> / [[Text Chat|{{button|1 = <span style="font-family:Pictos;">q</span>|2 = white}}]]<code><nowiki><span style="font-family:Pictos;">q</span></nowiki></code> [[Text Chat]] tab
** <span style="font-family:Pictos;">P</span> <code><nowiki><span style="font-family:Pictos;">P</span></nowiki></code> [[Art Library]] tab
+
** <span style="font-family:Pictos;">P</span> / [[Art Library|{{button|1 = <span style="font-family:Pictos;">P</span>|2 = white}}]] <code><nowiki><span style="font-family:Pictos;">P</span></nowiki></code> [[Art Library]] tab
** <span style="font-family:Pictos;">N</span> <code><nowiki><span style="font-family:Pictos;">N</span></nowiki></code> [[Journal]] tab
+
** <span style="font-family:Pictos;">N</span> / [[Journal|{{button|1 = <span style="font-family:Pictos;">N</span>|2 = white}}]] <code><nowiki><span style="font-family:Pictos;">N</span></nowiki></code> [[Journal]] tab
** <span style="font-family:Pictos;">i</span> <code><nowiki><span style="font-family:Pictos;">i</span></nowiki></code> [[Compendium]] tab
+
** <span style="font-family:Pictos;">i</span> / {{button|1 = <span style="font-family:Pictos;">i</span>|2 = white}} <code><nowiki><span style="font-family:Pictos;">i</span></nowiki></code> [[Compendium]] tab
** <span style="font-family:Pictos Custom;">u</span> <code><nowiki><span style="font-family:Pictos Custom;">u</span></nowiki></code> [[Jukebox]] tab
+
** <span style="font-family:Pictos Custom;">u</span> / {{button|1 = <span style="font-family:Pictos Custom;">u</span>|2 = white}} <code><nowiki><span style="font-family:Pictos Custom;">u</span></nowiki></code> [[Jukebox]] tab
** <span style="font-family:Pictos;">l</span> <code><nowiki><span style="font-family:Pictos;">l</span></nowiki></code> [[Collections]] tab
+
** <span style="font-family:Pictos;">l</span> / {{button|1 = <span style="font-family:Pictos;">l</span>|2 = white}} <code><nowiki><span style="font-family:Pictos;">l</span></nowiki></code> [[Collections]] tab
** <span style="font-family:Pictos;">y</span> <code><nowiki><span style="font-family:Pictos;">y</span></nowiki></code> [[My Settings]] tab
+
** <span style="font-family:Pictos;">y</span> / {{button|1 = <span style="font-family:Pictos;">y</span>|2 = white}} <code><nowiki><span style="font-family:Pictos;">y</span></nowiki></code> [[My Settings]] tab
  
 
* '''[[Toolbox]]'''
 
* '''[[Toolbox]]'''
Line 29: Line 30:
 
** <span style="font-family:Pictos;">s</span> <code><nowiki><span style="font-family:Pictos;">s</span></nowiki></code> [[Zoom|Zoom Tool]]
 
** <span style="font-family:Pictos;">s</span> <code><nowiki><span style="font-family:Pictos;">s</span></nowiki></code> [[Zoom|Zoom Tool]]
 
** [[File:Ruler.png|middle|15px]] <code><nowiki>[[File:Ruler.png|middle|15px]]</nowiki></code> [[Ruler|Ruler Tool]]
 
** [[File:Ruler.png|middle|15px]] <code><nowiki>[[File:Ruler.png|middle|15px]]</nowiki></code> [[Ruler|Ruler Tool]]
** {{torch}} <code><nowiki>[[File:Place-light-torch-icon.png|middle|18px]] or {{torch}}</nowiki></code> [[Place Light Tool]]
+
** {{torch}} <code><nowiki>{{torch}}</nowiki></code> or <code><nowiki>[[File:Place-light-torch-icon.png|middle|18px]]</nowiki></code> [[Place Light Tool]]
 
** <span style="font-family:Pictos;">C</span> <code><nowiki><span style="font-family:Pictos;">C</span></nowiki></code> [[Fog of War]]
 
** <span style="font-family:Pictos;">C</span> <code><nowiki><span style="font-family:Pictos;">C</span></nowiki></code> [[Fog of War]]
 
*** <span style="font-family:Pictos;">E</span> <code><nowiki><span style="font-family:Pictos;">E</span></nowiki></code> Reveal
 
*** <span style="font-family:Pictos;">E</span> <code><nowiki><span style="font-family:Pictos;">E</span></nowiki></code> Reveal
Line 46: Line 47:
  
 
'''[[Character Sheet]]'''
 
'''[[Character Sheet]]'''
* <span style="font-family:Pictos;">&</span> <code><nowiki><span style="font-family:Pictos;">&</span></nowiki></code> Add, [[Repeating Section]]
+
* <span style="font-family:Pictos;">&</span> / {{button|1 = <span style="font-family:Pictos;">&</span>|2 = white}} <code><nowiki><span style="font-family:Pictos;">&</span></nowiki></code> Add, [[Repeating Section]]
* <span style="font-family:Pictos;">(</span> <code><nowiki><span style="font-family:Pictos;">(</span></nowiki></code>/<code><nowiki>{{Lock}}</nowiki></code> Lock, repeating section
+
* <span style="font-family:Pictos;">(</span> / {{button|1 = <span style="font-family:Pictos;">(</span>|2 = white}} <code><nowiki><span style="font-family:Pictos;">(</span></nowiki></code>/<code><nowiki>{{Lock}}</nowiki></code> Lock, repeating section
* <span style="font-family:Pictos;">)</span> <code><nowiki><span style="font-family:Pictos;">)</span></nowiki></code>/<code><nowiki>{{Unlock}}</nowiki></code> Unlock, repeating section
+
* <span style="font-family:Pictos;">)</span> / {{button|1 = <span style="font-family:Pictos;">)</span>|2 = white}} <code><nowiki><span style="font-family:Pictos;">)</span></nowiki></code>/<code><nowiki>{{Unlock}}</nowiki></code> Unlock, repeating section
* '''<big>≡</big>''' <code><nowiki>'''<big>≡</big>'''</nowiki></code> Reorder symbol, repeating section.
+
* '''<big>≡</big>''' / {{button|{{3lines}}|white}} <code><nowiki>'''<big>≡</big>'''</nowiki></code> Reorder symbol, repeating section.
* <span style="font-family:Pictos;">w</span> <code><nowiki><span style="font-family:Pictos;">w</span></nowiki></code>/<code><nowiki>{{Bubble}}</nowiki></code>  Send to chat
+
* <span style="font-family:Pictos;">w</span> / {{button|1 = <span style="font-family:Pictos;">w</span>|2 = white}} <code><nowiki><span style="font-family:Pictos;">w</span></nowiki></code>/<code><nowiki>{{Bubble}}</nowiki></code>  Send to chat
* <span style="font-family:Pictos;">y</span> <code><nowiki><span style="font-family:Pictos;">y</span></nowiki></code>/<code><nowiki>{{Gear}}</nowiki></code> Settings, gear icon
+
* <span style="font-family:Pictos;">y</span> / {{button|1 = <span style="font-family:Pictos;">y</span>|2 = white}} <code><nowiki><span style="font-family:Pictos;">y</span></nowiki></code>/<code><nowiki>{{Gear}}</nowiki></code> Settings, gear icon
* <span style="font-family:Pictos;">x</span> <code><nowiki><span style="font-family:Pictos;">x</span></nowiki></code>/<code><nowiki>{{hammer}} or {{wrench}} </nowiki></code> Alternative Settings icon.
+
* <span style="font-family:Pictos;">x</span> / {{button|1 = <span style="font-family:Pictos;">x</span>|2 = white}} <code><nowiki><span style="font-family:Pictos;">x</span></nowiki></code>/<code><nowiki>{{hammer}} or {{wrench}} </nowiki></code> Alternative Settings icon.
 +
* [[File:Charmancer-logo.png|20px]]  [[Charactermancer]] logo
 +
 
 +
'''Misc.'''
 +
* {{button|{{3dots}}|white}}  <code><nowiki>{{button|{{3dots}}|white}}</nowiki></code> - Token Settings -Player Permission menu
 +
* {{folder}} <code><nowiki>{{folder}}</nowiki></code> - like {{button|{{folder}}Add|white}}-button
 +
* UI buttons: {{button|{{gear}}|blue}}, {{button|'''<big>+</big>'''|white}}, {{button|'''<big>-</big>'''|white}}, {{button|1 = <span style="font-family:Pictos;">#</span>|2 = white}}, {{button|1 = <span style="font-family:Pictos;">z</span>|2 = white}}, {{button|1 = <span style="font-family:Pictos;">s</span>|2 = white}}, {{button|1 = <span style="font-family:Pictos;">z</span>|2 = white}}, {{button|1 = <span style="font-family:Pictos;">{{!}}</span>|2 = white}}
 +
* {{button|Delete|red}}, {{button|Apply Changes|white}}, {{button|{{upload}}Upload|white}}, {{button|Save Settings|blue}}, {{button|'''<big>+</big>'''Add|white}}
  
 
'''Dice'''
 
'''Dice'''

Latest revision as of 06:23, 18 March 2024

The font families used for many of the Roll20 icons are Pictos, Pictos Custom, and dicefontd4 through dicefontd20. Check the Icon Fonts section on the CSS Wizardry page for a full list of symbols for the fonts.


  • Sidebar
    • q / q<span style="font-family:Pictos;">q</span> Text Chat tab
    • P / P <span style="font-family:Pictos;">P</span> Art Library tab
    • N / N <span style="font-family:Pictos;">N</span> Journal tab
    • i / i <span style="font-family:Pictos;">i</span> Compendium tab
    • u / u <span style="font-family:Pictos Custom;">u</span> Jukebox tab
    • l / l <span style="font-family:Pictos;">l</span> Collections tab
    • y / y <span style="font-family:Pictos;">y</span> My Settings tab
  • Toolbox
    • w <span style="font-family:Pictos Custom;">w</span> Select and Pan Tool
      • Hand.png [[File:Hand.png|middle|15px]] Pan mode
    • b <span style="font-family:Pictos;">b</span> Layers
      • @ <span style="font-family:Pictos;">@</span> Map & Background layer
      • b <span style="font-family:Pictos;">b</span> Objects & Tokens layer
      • E <span style="font-family:Pictos;">E</span> GM Info Overlay layer
      • r <span style="font-family:Pictos Custom;">r</span> Dynamic Lighting layer
    • i <span style="font-family:Pictos Custom;">i</span> Drawing Tools
      • a <span style="font-family:Pictos Custom;">a</span> Draw Shapes tool
      • c <span style="font-family:Pictos Three;">c</span> Polygon/Line Tool
      • q <span style="font-family:Pictos Custom;">q</span>Text Tool
      • # <span style="font-family:Pictos;">#</span> Clear Drawings tool
    • e <span style="font-family:Pictos;">e</span> FX Tool
    • s <span style="font-family:Pictos;">s</span> Zoom Tool
    • Ruler.png [[File:Ruler.png|middle|15px]] Ruler Tool
    • Place-light-torch-icon.png {{torch}} or [[File:Place-light-torch-icon.png|middle|18px]] Place Light Tool
    • C <span style="font-family:Pictos;">C</span> Fog of War
      • E <span style="font-family:Pictos;">E</span> Reveal
      • c <span style="font-family:Pictos Three;">c</span> Polygon Reveal
      • C <span style="font-family:Pictos;">C</span> Hide Areas
      • # <span style="font-family:Pictos;">#</span> Reset Fog
    • Udl-hide-icon.jpg [[File:Udl-hide-icon.jpg|middle|15px]] Darkness Tool
      • Udl-reveal-icon.jpg [[File:Udl-reveal-icon.jpg|middle|15px]] Reveal
      • Udl-perm darkness-icon.jpg [[File:Udl-perm_darkness-icon.jpg|middle|15px]] Permanent Darkness
      • Udl-explorer-icon.jpg [[File:Udl-explorer-icon.jpg|middle|15px]] Explorable Darkness
      • Udl-polygon-icon.jpg [[File:Udl-polygon-icon.jpg|middle|15px]] Polygon
      • Udl-rectangle-icon.jpg [[File:Udl-rectangle-icon.jpg|middle|15px]] Rectangle
    • t <span style="font-family:Pictos;">t</span> Turn Tracker
    • t <big><span style="font-family:dicefontd20;">t</span></big> Dice Rolling GUI
    • ? <span style="font-family:Pictos;">?</span> Help Tool

Character Sheet

  • & / & <span style="font-family:Pictos;">&</span> Add, Repeating Section
  • ( / ( <span style="font-family:Pictos;">(</span>/{{Lock}} Lock, repeating section
  • ) / ) <span style="font-family:Pictos;">)</span>/{{Unlock}} Unlock, repeating section
  • / '''<big>≡</big>''' Reorder symbol, repeating section.
  • w / w <span style="font-family:Pictos;">w</span>/{{Bubble}} Send to chat
  • y / y <span style="font-family:Pictos;">y</span>/{{Gear}} Settings, gear icon
  • x / x <span style="font-family:Pictos;">x</span>/{{hammer}} or {{wrench}} Alternative Settings icon.
  • Charmancer-logo.png Charactermancer logo

Misc.

  • {{button|{{3dots}}|white}} - Token Settings -Player Permission menu
  • o {{folder}} - like oAdd-button
  • UI buttons: y, +, -, #, z, s, z, |
  • Delete, Apply Changes, cUpload, Save Settings, +Add

Dice

  • t <span style="font-family:dicefontd20;">t</span> d20
  • d <span style="font-family:dicefontd4;">d</span> d4
  • f <span style="font-family:dicefontd6;">f</span> d6
  • h <span style="font-family:dicefontd8;">h</span> d8
  • j <span style="font-family:dicefontd10;">j</span> d10
  • l <span style="font-family:dicefontd12;">l</span> d12