{icon}

Writes an interface icon from PAD's own set of 79 as inline SVG, drawn in the colour of the text around it.

Pictures and media Single tags

Syntax 

{icon 'arrow-right'}
{icon 'trash', size=20, stroke=2, label='text'}

Parameters

name
The icon: arrows and chevrons (arrow-right, chevron-down, external, refresh ...), marks (check, x, plus, info, alert, star, heart ...), layout (home, menu, search, settings ...), people (user, mail, bell ...), time and places, files (file, edit, trash, download ...), media, security and code. padIconNames () lists them all.

Options

size
Width and height in pixels, default 20.
stroke
The line width on the 24-unit grid, default 2.
label
The accessible name: the icon becomes role="img" with aria-label and <title>. Without it the icon is decoration.

Description

{icon} writes an icon from PAD's own set (tags/_lib/icon.php): 79 interface symbols drawn on a 24 by 24 grid as lines, circles and rectangles, written as inline SVG - no icon font, no sprite file, no request. The icon is drawn with stroke="currentColor", round caps and joins and no fill, so it takes the colour of the text around it and scales with size.

Without label the icon is decoration - aria-hidden="true" and focusable="false" - right for an icon beside the text it goes with, like {icon 'trash'} Delete. An icon that stands alone in a button or a link needs label: it then becomes role="img" with that name, so a screen reader says what the button does.

Each icon has the classes pad-icon pad-icon-<name> for styling; stroke makes the lines lighter or heavier. No name, or a name not in the set, is an error under the strict check that names the icons close to it (did you mean arrow-left?). padIconNames () answers the whole list to PHP. For a picture character in text see {emoji}.

Examples

In buttons and links

Beside text an icon is decoration; alone it gets label= and is read out.

Templateexamples/icon/1-buttons.pad 
<p style="display:flex; gap:8px; flex-wrap:wrap">
  <button type="button">{icon 'download', size=16} Download</button>
  <button type="button">{icon 'edit', size=16} Edit</button>
  <button type="button">{icon 'trash', size=16} Delete</button>
  <button type="button">{icon 'settings', size=16, label='Settings'}</button>
</p>
<p><a href="?tag/icon">More about icons {icon 'arrow-right', size=16}</a></p>
Resultopen alone

More about icons

Size, stroke and colour

size= scales the icon, stroke= changes the weight of its lines; the colour is the text's.

Templateexamples/icon/2-sizes.pad 
<p style="display:flex; gap:12px; align-items:center">
  {icon 'heart', size=16}{icon 'heart', size=24}{icon 'heart', size=40}{icon 'heart', size=40, stroke=1}
</p>
<p style="display:flex; gap:12px; align-items:center; color:#2e7d32">
  {icon 'check-circle', size=28, label='Done'}{icon 'info', size=28, label='Information'}{icon 'alert', size=28, label='Warning'}
</p>
Resultopen alone

Done Information Warning

A few of the set

A name per row of a page array, each icon written with its name under it.

Templateexamples/icon/3-list.pad 
<ul style="list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:16px">
  {glyphs}
  <li style="text-align:center">{icon $name, size=24}<br><code>{$name}</code></li>
  {/glyphs}
</ul>
PHPexamples/icon/3-list.php 
<?php

  $glyphs = [
    [ 'name' => 'home'     ], [ 'name' => 'search'   ], [ 'name' => 'user'  ], [ 'name' => 'mail'   ],
    [ 'name' => 'calendar' ], [ 'name' => 'clock'    ], [ 'name' => 'lock'  ], [ 'name' => 'folder' ],
    [ 'name' => 'cart'     ], [ 'name' => 'terminal' ] ];

?>
Resultopen alone

  • home

  • search

  • user

  • mail

  • calendar

  • clock

  • lock

  • folder

  • cart

  • terminal

See also

  • {emoji} An emoji by its GitHub or Slack shortcode, as a labelled image a screen reader names.
  • {rating} Draws a score as stars or hearts in inline SVG - whole ones filled, a part of one clipped - and says it in words.
  • {avatar} Draws an initials avatar as inline SVG - the letters of a name in a circle coloured by a hash of it, no image needed.