All tags/Icon

Icons in buttons and links

An icon beside text is decoration; one alone gets label= and is read out. size= and stroke= change its scale and weight.

1 The template icon/buttons.pad pad

<div style="display:grid; gap:18px; justify-items:start">
  <p style="display:flex; gap:10px; flex-wrap:wrap; margin:0">
    <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 style="margin:0"><a href="?icon/gallery">See every icon {icon 'arrow-right', size=16}</a></p>
  <p style="display:flex; gap:14px; align-items:center; margin:0">
    {icon 'heart', size=16}{icon 'heart', size=24}{icon 'heart', size=32}{icon 'heart', size=48, stroke=1.5}{icon 'heart', size=48, stroke=1}
  </p>
  <p style="display:flex; gap:14px; align-items:center; margin:0; color:#2a78d6">
    {icon 'check-circle', size=28, label='Done'}{icon 'info', size=28, label='Information'}{icon 'alert', size=28, label='Warning'}{icon 'x-circle', size=28, label='Failed'}
  </p>
</div>

2 The result rendered on the server

See every icon