Atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.

Atomic Design by Brad Frost

Avatar

Renders an avatar. If no image, return username initials.
options:

  • -square : default display avatar
  • -rounded: a rounded square avatar
  • -circle: a circle avatar
<div class="prismea-avatar">
  <p class="prismea-text">AL</p>
</div>
<div class="prismea-avatar -rounded"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/>
</div>
<div class="prismea-avatar -circle"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/>
</div>
.prismea-avatar
  p.prismea-text AL
.prismea-avatar.-rounded
  img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
.prismea-avatar.-circle
  img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')

Badge

Renders a badge.
options:

  • -block : it takes 100% of the available space
  • -rounded: a rounded badge
  • -uppercase: badge text in uppercase
<span class="prismea-badge">Badge
</span>
<span class="prismea-badge -uppercase">Badge
</span>
<span class="prismea-badge -classic">Badge
</span>
<span class="prismea-badge -negative">Badge
</span>
<span class="prismea-badge -positive">Badge
</span>
<span class="prismea-badge -neutral">Badge
</span>
<span class="prismea-badge -special">Badge
</span>
<span class="prismea-badge -classic-light">Badge
</span>
<div class="prismea-badge -block">Badge
</div>
<span class="prismea-badge -rounded">Badge
</span>
<span class="prismea-badge -uppercase -rounded">Badge
</span>
<span class="prismea-badge -classic -rounded">Badge
</span>
<span class="prismea-badge -negative -rounded">Badge
</span>
<span class="prismea-badge -positive -rounded">Badge
</span>
<span class="prismea-badge -neutral -rounded">Badge
</span>
<span class="prismea-badge -special -rounded">Badge
</span>
<span class="prismea-badge -classic-light -rounded">Badge
</span>
span.prismea-badge.
  Badge
  
span.prismea-badge.-uppercase.
  Badge
  
span.prismea-badge.-classic.
  Badge
  
span.prismea-badge.-negative.
  Badge
  
span.prismea-badge.-positive.
  Badge
  
span.prismea-badge.-neutral.
  Badge
  
span.prismea-badge.-special.
  Badge
  
span.prismea-badge.-classic-light.
  Badge
  
.prismea-badge.-block.
  Badge
  
span.prismea-badge.-rounded.
  Badge
  
span.prismea-badge.-uppercase.-rounded.
  Badge
  
span.prismea-badge.-classic.-rounded.
  Badge
  
span.prismea-badge.-negative.-rounded.
  Badge
  
span.prismea-badge.-positive.-rounded.
  Badge
  
span.prismea-badge.-neutral.-rounded.
  Badge
  
span.prismea-badge.-special.-rounded.
  Badge
  
span.prismea-badge.-classic-light.-rounded.
  Badge
  

Button

<button class="prismea-button">Button
</button>
<!-- Styles-->
<button class="prismea-button -link ">Link
</button>
<button class="prismea-button -link -color-positive ">Link with color
</button>
<button class="prismea-button -outlined ">Outlined
</button>
<button class="prismea-button -outlined " disabled="disabled">Outlined disabled
</button>
<button class="prismea-button -outlined  -inverse-on-hover">Outlined inverses on hover
</button>
<!-- States-->
<button class="prismea-button  -pending">Pending
</button>
<button class="prismea-button" disabled="disabled">Disabled
</button>
<button class="prismea-button -icon "><i class="prismea-glyph-12_search"></i>
</button>
<button class="prismea-button  -icon-text"><i class="prismea-icon prismea-glyph-12_search"></i><span>Button with text and icon</span>
</button>
<!-- Shapes and sizes-->
<button class="prismea-button -short ">Short
</button>
<button class="prismea-button -wide ">Wide button (250px)
</button>
<button class="prismea-button -short -wide ">Wide short button
</button>
<button class="prismea-button  -pill">Pill with radius 20px
</button>
<button class="prismea-button -short  -pill">Pill short
</button>
<button class="prismea-button -wide  -pill">Pill wide
</button>
<button class="prismea-button -short -wide  -pill">Pill wide short
</button>
<button class="prismea-button -block ">Block
</button>
<!-- Themes-->
<button class="prismea-button -light ">Light
</button>
<button class="prismea-button -alert ">Alert
</button>
<button class="prismea-button -positive ">Positive
</button>
<button class="prismea-button -negative ">Negative
</button>
<button class="prismea-button -warning ">Warning
</button>
<button class="prismea-button -special ">Special
</button>
<button class="prismea-button -faded ">Faded
</button>
<button class="prismea-button -neutral ">Neutral
</button>
<button class="prismea-button -alert-light ">Alert light
</button>
<button class="prismea-button -alert-dark ">Alert dark
</button>
<button class="prismea-button -alert-darker ">Alert darker
</button>
<!-- Compositions-->
<button class="prismea-button -outlined -alert  -pill -inverse-on-hover">Alert outlined pill inverses on hover
</button>
<button class="prismea-button -short -negative  -pill">Pill short negative
</button>
<button class="prismea-button -outlined -short -wide -warning  -inverse-on-hover">Wide short warn ol inv
</button>
<button class="prismea-button -outlined -short -positive  -pill">Positive ol short pill
</button>
<button class="prismea-button -outlined -icon -special  -inverse-on-hover"><i class="prismea-glyph-12_search"></i>
</button>
<button class="prismea-button -outlined -short -neutral  -pill -icon-text"><i class="prismea-icon prismea-glyph-24_transfer"></i><span>Pill outlined sm</span>
</button>
<button class="prismea-button -short -neutral  -pill -icon-text"><i class="prismea-icon prismea-glyph-16_add -x2"></i><span>Pill sm with size x2 icon</span>
</button>
button.prismea-button.
  Button
  
//  Styles
button.prismea-button.-link.
  Link
  
button.prismea-button.-link.-color-positive.
  Link with color
  
button.prismea-button.-outlined.
  Outlined
  
button.prismea-button.-outlined(disabled).
  Outlined disabled
  
button.prismea-button.-outlined.-inverse-on-hover.
  Outlined inverses on hover
  
//  States
button.prismea-button.-pending.
  Pending
  
button.prismea-button(disabled).
  Disabled
  
button.prismea-button.-icon
  i.prismea-glyph-12_search
button.prismea-button.-icon-text
  i.prismea-icon.prismea-glyph-12_search
  span Button with text and icon
//  Shapes and sizes
button.prismea-button.-short.
  Short
  
button.prismea-button.-wide.
  Wide button (250px)
  
button.prismea-button.-short.-wide.
  Wide short button
  
button.prismea-button.-pill.
  Pill with radius 20px
  
button.prismea-button.-short.-pill.
  Pill short
  
button.prismea-button.-wide.-pill.
  Pill wide
  
button.prismea-button.-short.-wide.-pill.
  Pill wide short
  
button.prismea-button.-block.
  Block
  
//  Themes
button.prismea-button.-light.
  Light
  
button.prismea-button.-alert.
  Alert
  
button.prismea-button.-positive.
  Positive
  
button.prismea-button.-negative.
  Negative
  
button.prismea-button.-warning.
  Warning
  
button.prismea-button.-special.
  Special
  
button.prismea-button.-faded.
  Faded
  
button.prismea-button.-neutral.
  Neutral
  
button.prismea-button.-alert-light.
  Alert light
  
button.prismea-button.-alert-dark.
  Alert dark
  
button.prismea-button.-alert-darker.
  Alert darker
  
//  Compositions
button.prismea-button.-outlined.-alert.-pill.-inverse-on-hover.
  Alert outlined pill inverses on hover
  
button.prismea-button.-short.-negative.-pill.
  Pill short negative
  
button.prismea-button.-outlined.-short.-wide.-warning.-inverse-on-hover.
  Wide short warn ol inv
  
button.prismea-button.-outlined.-short.-positive.-pill.
  Positive ol short pill
  
button.prismea-button.-outlined.-icon.-special.-inverse-on-hover
  i.prismea-glyph-12_search
button.prismea-button.-outlined.-short.-neutral.-pill.-icon-text
  i.prismea-icon.prismea-glyph-24_transfer
  span Pill outlined sm
button.prismea-button.-short.-neutral.-pill.-icon-text
  i.prismea-icon.prismea-glyph-16_add.-x2
  span Pill sm with size x2 icon

Color

<span class="prismea-color -color-classic">Classic</span><span class="prismea-color -color-classic-light">Classic Light</span><span class="prismea-color -color-positive">Positive</span><span class="prismea-color -color-negative">Negative</span><span class="prismea-color -color-neutral">Neutral</span><span class="prismea-color -color-neutral-light">Neutral Light</span><span class="prismea-color -color-alert">Alert</span><span class="prismea-color -color-alert-dark">Alert Dark</span><span class="prismea-color -color-warning">Warning</span><span class="prismea-color -color-faded-dark">Faded Dark</span><span class="prismea-color -color-faded">Faded</span><span class="prismea-color -color-faded-light">Faded Light</span><span class="prismea-color -color-light">Light</span><span class="prismea-color -color-special">Special</span><span class="prismea-color -color-pending">Pending</span><span class="prismea-color -color-black">Black</span>
span.prismea-color.-color-classic Classic
span.prismea-color.-color-classic-light Classic Light
span.prismea-color.-color-positive Positive
span.prismea-color.-color-negative Negative
span.prismea-color.-color-neutral Neutral
span.prismea-color.-color-neutral-light Neutral Light
span.prismea-color.-color-alert Alert
span.prismea-color.-color-alert-dark Alert Dark
span.prismea-color.-color-warning Warning
span.prismea-color.-color-faded-dark Faded Dark
span.prismea-color.-color-faded Faded
span.prismea-color.-color-faded-light Faded Light
span.prismea-color.-color-light Light
span.prismea-color.-color-special Special
span.prismea-color.-color-pending Pending
span.prismea-color.-color-black Black

Contextual button

<button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
<button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
<button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
button.prismea-contextual-button
  i.prismea-contextual-button--icon.prismea-glyph-16_document
button.prismea-contextual-button.-faded
  i.prismea-contextual-button--icon.prismea-glyph-16_document
button.prismea-contextual-button.-invisible
  i.prismea-contextual-button--icon.prismea-glyph-16_document

Drawing

<img class="prismea-drawing" src="/atom/drawing/example-drawing.svg" alt="Some drawing items"/>
img.prismea-drawing(src='/atom/drawing/example-drawing.svg', alt='Some drawing items')

Icon

Can have a circle background with the class -circle.
You can then customize the background color width for example -neutral and glyph color with -color-neutral

<i class="prismea-icon prismea-glyph-50-logo"></i><i class="prismea-icon -x2 prismea-glyph-50-logo"></i><i class="prismea-icon -x3 prismea-glyph-50-logo"></i><i class="prismea-icon -x4 prismea-glyph-50-logo"></i><i class="prismea-icon prismea-glyph-50-logo -color-classic"></i><i class="prismea-icon -x1 prismea-glyph-24_dashboard -color-light -circle -classic"></i><i class="prismea-icon -x2 prismea-glyph-24_incoming-transfer -circle -neutral"></i><i class="prismea-icon -x3 prismea-glyph-50-logo -circle -alert-light"></i><i class="prismea-icon -x4 prismea-glyph-50-logo -circle -warning"></i>
i.prismea-icon.prismea-glyph-50-logo
i.prismea-icon.-x2.prismea-glyph-50-logo
i.prismea-icon.-x3.prismea-glyph-50-logo
i.prismea-icon.-x4.prismea-glyph-50-logo
i.prismea-icon.prismea-glyph-50-logo.-color-classic
i.prismea-icon.-x1.prismea-glyph-24_dashboard.-color-light.-circle.-classic
i.prismea-icon.-x2.prismea-glyph-24_incoming-transfer.-circle.-neutral
i.prismea-icon.-x3.prismea-glyph-50-logo.-circle.-alert-light
i.prismea-icon.-x4.prismea-glyph-50-logo.-circle.-warning

Icon button

<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_pending"></i></button>
<button class="prismea-icon-button" disabled="disabled"><i class="prismea-icon-button--icon prismea-glyph-16_pending"></i></button>
<button class="prismea-icon-button -faded"><i class="prismea-icon-button--icon prismea-glyph-16_pending"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_admin"></i></button>
<button class="prismea-icon-button -selected"><i class="prismea-icon-button--icon prismea-glyph-16_admin"></i></button>
<button class="prismea-icon-button -circle"><i class="prismea-icon-button--icon prismea-glyph-16_pending"></i></button>
<button class="prismea-icon-button -circle" disabled="disabled"><i class="prismea-icon-button--icon prismea-glyph-16_pending"></i></button>
<button class="prismea-icon-button -circle -faded"><i class="prismea-icon-button--icon prismea-glyph-16_pending"></i></button>
<button class="prismea-icon-button -circle -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_admin"></i></button>
<button class="prismea-icon-button -circle -selected"><i class="prismea-icon-button--icon prismea-glyph-16_admin"></i></button>
button.prismea-icon-button
  i.prismea-icon-button--icon.prismea-glyph-16_pending
button.prismea-icon-button(disabled)
  i.prismea-icon-button--icon.prismea-glyph-16_pending
button.prismea-icon-button.-faded
  i.prismea-icon-button--icon.prismea-glyph-16_pending
button.prismea-icon-button.-invisible
  i.prismea-icon-button--icon.prismea-glyph-16_admin
button.prismea-icon-button.-selected
  i.prismea-icon-button--icon.prismea-glyph-16_admin
button.prismea-icon-button.-circle
  i.prismea-icon-button--icon.prismea-glyph-16_pending
button.prismea-icon-button.-circle(disabled)
  i.prismea-icon-button--icon.prismea-glyph-16_pending
button.prismea-icon-button.-circle.-faded
  i.prismea-icon-button--icon.prismea-glyph-16_pending
button.prismea-icon-button.-circle.-invisible
  i.prismea-icon-button--icon.prismea-glyph-16_admin
button.prismea-icon-button.-circle.-selected
  i.prismea-icon-button--icon.prismea-glyph-16_admin

Input

Autocomplete

Renders an autocomplete.

<div class="prismea-autocomplete">
  <div class="prismea-autocomplete--field -sm">
    <div class="prismea-autocomplete--input">
      <input class="prismea-input-text -sm" placeholder="Mighty text"/>
      <div class="prismea-autocomplete--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-autocomplete--options">
      <li class="prismea-autocomplete--option">-- Select an option --</li>
      <li class="prismea-autocomplete--option -autocompleted">Selected Option</li>
      <li class="prismea-autocomplete--option -disabled">Disabled Option</li>
      <li class="prismea-autocomplete--option">Third</li>
    </ul>
  </div>
</div>
<div class="prismea-autocomplete">
  <div class="prismea-autocomplete--field -md">
    <div class="prismea-autocomplete--input">
      <input class="prismea-input-text -md" placeholder="Mighty text"/>
      <div class="prismea-autocomplete--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-autocomplete--options">
      <li class="prismea-autocomplete--option">-- Select an option --</li>
      <li class="prismea-autocomplete--option -autocompleted">Selected Option</li>
      <li class="prismea-autocomplete--option -disabled">Disabled Option</li>
      <li class="prismea-autocomplete--option">Third</li>
    </ul>
  </div>
</div>
<div class="prismea-autocomplete">
  <div class="prismea-autocomplete--field -md -open">
    <div class="prismea-autocomplete--input">
      <input class="prismea-input-text -md -open" placeholder="Mighty text"/>
      <div class="prismea-autocomplete--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-autocomplete--options">
      <li class="prismea-autocomplete--option">-- Select an option --</li>
      <li class="prismea-autocomplete--option -autocompleted">Selected Option</li>
      <li class="prismea-autocomplete--option -disabled">Disabled Option</li>
      <li class="prismea-autocomplete--option">Third</li>
    </ul>
  </div>
</div>
.prismea-autocomplete
  .prismea-autocomplete--field.-sm
    .prismea-autocomplete--input
      input.prismea-input-text.-sm(placeholder='Mighty text')
      .prismea-autocomplete--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-autocomplete--options
      li.prismea-autocomplete--option -- Select an option --
      li.prismea-autocomplete--option.-autocompleted Selected Option
      li.prismea-autocomplete--option.-disabled Disabled Option
      li.prismea-autocomplete--option Third
.prismea-autocomplete
  .prismea-autocomplete--field.-md
    .prismea-autocomplete--input
      input.prismea-input-text.-md(placeholder='Mighty text')
      .prismea-autocomplete--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-autocomplete--options
      li.prismea-autocomplete--option -- Select an option --
      li.prismea-autocomplete--option.-autocompleted Selected Option
      li.prismea-autocomplete--option.-disabled Disabled Option
      li.prismea-autocomplete--option Third
.prismea-autocomplete
  .prismea-autocomplete--field.-md.-open
    .prismea-autocomplete--input
      input.prismea-input-text.-md.-open(placeholder='Mighty text')
      .prismea-autocomplete--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-autocomplete--options
      li.prismea-autocomplete--option -- Select an option --
      li.prismea-autocomplete--option.-autocompleted Selected Option
      li.prismea-autocomplete--option.-disabled Disabled Option
      li.prismea-autocomplete--option Third

Checkbox

3 states:

  • Empty
  • Checked
  • Checked (disabled)
<div class="prismea-checkbox" style="margin-bottom: 15px;">
  <input type="checkbox" id="1" onclick=""/>
  <label for="1"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
  </label>
</div>
<div class="prismea-checkbox" style="margin-bottom: 15px;">
  <input type="checkbox" id="2" checked="checked" onclick=""/>
  <label for="2"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
  </label>
</div>
<div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
  <input type="checkbox" id="3" checked="checked" onclick="return false;"/>
  <label for="3"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
  </label>
</div>
.prismea-checkbox(style='margin-bottom: 15px;')
  input#1(type='checkbox')
  label(for='1')
    i.prismea-icon.prismea-glyph-16_checkbox.-color-light
.prismea-checkbox(style='margin-bottom: 15px;')
  input#2(type='checkbox', checked)
  label(for='2')
    i.prismea-icon.prismea-glyph-16_checkbox.-color-light
.prismea-checkbox.-disabled(style='margin-bottom: 15px;')
  input#3(type='checkbox', checked, onclick='return false;')
  label(for='3')
    i.prismea-icon.prismea-glyph-16_checkbox.-color-light

Input text

<input class="prismea-input-text  " type="text" placeholder="Mighty text"/>
<input class="prismea-input-text -sm  " type="text" placeholder="Mighty text"/>
<input class="prismea-input-text -md  " type="text" placeholder="Mighty text"/>
<input class="prismea-input-text -md -error " type="text" placeholder="Mighty text"/>
<input class="prismea-input-text -md  -disabled" type="text" placeholder="Disabled" disabled="disabled"/>
<input class="prismea-input-text -secondary  " type="search" placeholder="Search"/>
input.prismea-input-text(type='text', placeholder='Mighty text')
input.prismea-input-text.-sm(type='text', placeholder='Mighty text')
input.prismea-input-text.-md(type='text', placeholder='Mighty text')
input.prismea-input-text.-md.-error(type='text', placeholder='Mighty text')
input.prismea-input-text.-md.-disabled(type='text', placeholder='Disabled', disabled)
input.prismea-input-text.-secondary(type='search', placeholder='Search')

Input file

<div class="prismea-input-file">
  <label class="prismea-input-file--wrapper" for="prismea-input-file"><span class="prismea-input-file--container"><span>Import document (jpg, pdf, png, doc) - 2mo max.</span><strong class="prismea-input-file--reset"><i class="prismea-glyph-12_cross"></i></strong></span><span class="prismea-input-file--button">Choose a file</span></label>
  <input id="prismea-input-file" type="file"/>
</div>
<div class="prismea-input-file">
  <label class="prismea-input-file--wrapper" for="prismea-input-file"><span class="prismea-input-file--container -error"><span>Import document (jpg, pdf, png, doc) - 2mo max.</span><strong class="prismea-input-file--reset"><i class="prismea-glyph-12_cross"></i></strong></span><span class="prismea-input-file--button">Choose a file</span></label>
  <input id="prismea-input-file" type="file"/>
</div>
.prismea-input-file
  label.prismea-input-file--wrapper(for='prismea-input-file')
    span.prismea-input-file--container
      span Import document (jpg, pdf, png, doc) - 2mo max.
      strong.prismea-input-file--reset
        i.prismea-glyph-12_cross
    span.prismea-input-file--button Choose a file
  input#prismea-input-file(type='file')
.prismea-input-file
  label.prismea-input-file--wrapper(for='prismea-input-file')
    span.prismea-input-file--container.-error
      span Import document (jpg, pdf, png, doc) - 2mo max.
      strong.prismea-input-file--reset
        i.prismea-glyph-12_cross
    span.prismea-input-file--button Choose a file
  input#prismea-input-file(type='file')

Input Info

<div class="prismea-input-info">
  <p class="prismea-text">Kristin Orthega</p>
  <p class="prismea-text -text-sm">FR 76 XXXX XXXX XXXX 66</p>
</div>
.prismea-input-info
  p.prismea-text Kristin Orthega
  p.prismea-text.-text-sm FR 76 XXXX XXXX XXXX 66

Select

Renders a selector.
Options:

  • -multiple : multiple choices selector
<div class="prismea-select">
  <div class="prismea-select--field -sm">
    <div class="prismea-select--input">
      <div class="prismea-select--label"><span>Selected option</span></div>
      <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">-- Select an option --</li>
      <li class="prismea-select--option -selected">Selected Option</li>
      <li class="prismea-select--option -disabled">Disabled Option</li>
      <li class="prismea-select--option">Third</li>
    </ul>
  </div>
</div>
<div class="prismea-select">
  <div class="prismea-select--field -md">
    <div class="prismea-select--input">
      <div class="prismea-select--label"><span>Selected option</span></div>
      <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">-- Select an option --</li>
      <li class="prismea-select--option -selected">Selected Option</li>
      <li class="prismea-select--option -disabled">Disabled Option</li>
      <li class="prismea-select--option">Third</li>
    </ul>
  </div>
</div>
<div class="prismea-select -multiple">
  <select class="prismea-select--field -md" size="6" multiple="multiple">
    <option>First</option>
    <option>Second</option>
    <option>Third</option>
    <option>Fourth</option>
    <option>Fifth</option>
    <option>Last</option>
  </select>
</div>
<div class="prismea-select">
  <div class="prismea-select--field -md -open">
    <div class="prismea-select--input">
      <div class="prismea-select--label"><span>Selected option</span></div>
      <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">-- Select an option --</li>
      <li class="prismea-select--option -selected">Selected Option</li>
      <li class="prismea-select--option -disabled">Disabled Option</li>
      <li class="prismea-select--option">Third</li>
    </ul>
  </div>
</div>
.prismea-select
  .prismea-select--field.-sm
    .prismea-select--input
      .prismea-select--label
        span Selected option
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option -- Select an option --
      li.prismea-select--option.-selected Selected Option
      li.prismea-select--option.-disabled Disabled Option
      li.prismea-select--option Third
.prismea-select
  .prismea-select--field.-md
    .prismea-select--input
      .prismea-select--label
        span Selected option
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option -- Select an option --
      li.prismea-select--option.-selected Selected Option
      li.prismea-select--option.-disabled Disabled Option
      li.prismea-select--option Third
.prismea-select.-multiple
  select.prismea-select--field.-md(size='6', multiple)
    option First
    option Second
    option Third
    option Fourth
    option Fifth
    option Last
.prismea-select
  .prismea-select--field.-md.-open
    .prismea-select--input
      .prismea-select--label
        span Selected option
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option -- Select an option --
      li.prismea-select--option.-selected Selected Option
      li.prismea-select--option.-disabled Disabled Option
      li.prismea-select--option Third

Textarea

<textarea class="prismea-textarea" placeholder="Textarea" rows="4"></textarea>
<textarea class="prismea-textarea -sm" placeholder="Textarea" rows="4"></textarea>
<textarea class="prismea-textarea -md" placeholder="Textarea" rows="4"></textarea>
textarea.prismea-textarea(placeholder='Textarea', rows='4')
textarea.prismea-textarea.-sm(placeholder='Textarea', rows='4')
textarea.prismea-textarea.-md(placeholder='Textarea', rows='4')

Image

Customizable size options as included in the q-fixed-widths mixin

<img class="prismea-image -width-30" src="https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg"/><img class="prismea-image -width-50" src="https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg"/><img class="prismea-image" src="https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg"/><img class="prismea-image -width-100" src="https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg"/>
img.prismea-image.-width-30(src='https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg')
img.prismea-image.-width-50(src='https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg')
img.prismea-image(src='https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg')
img.prismea-image.-width-100(src='https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg')

Label

<label class="prismea-label">Label</label>
label.prismea-label Label

Line

<hr class="prismea-line"/>
<hr class="prismea-line -neutral"/>
hr.prismea-line
hr.prismea-line.-neutral

You can use -hoverable variant to not show the underline on focus and when a ion--hoverable parent is hovered.

nb: You can use a .skip-link in your project for a11y, it is not listed here due to fixed positioning

<a class="prismea-link" href="#">Link</a><a class="prismea-link -text-sm" href="#">Link</a><a class="prismea-link -text-xl" href="#">Link</a><a class="prismea-link -secondary" href="#">Link</a><a class="prismea-link -hoverable" href="#">Link</a>
a.prismea-link(href='#') Link
a.prismea-link.-text-sm(href='#') Link
a.prismea-link.-text-xl(href='#') Link
a.prismea-link.-secondary(href='#') Link
a.prismea-link.-hoverable(href='#') Link

Loader

<svg class="prismea-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 30">
  <path fill="none" stroke="#000" stroke-width="2.5" d="M10.1 23.8c6.2.1 11.6-5.1 11.6-11.3s-5-11.2-11.2-11.2H1.3V30"></path>
  <path fill="none" stroke="#000" stroke-width="2.5" d="M8.9 30V16.3h1.3c2.1 0 3.9-1.6 3.9-3.7s-1.7-3.8-3.8-3.8H2.5"></path>
</svg>
svg.prismea-loader(xmlns='http://www.w3.org/2000/svg', viewBox='0 0 23 30')
  path(fill='none', stroke='#000', stroke-width='2.5', d='M10.1 23.8c6.2.1 11.6-5.1 11.6-11.3s-5-11.2-11.2-11.2H1.3V30')
  path(fill='none', stroke='#000', stroke-width='2.5', d='M8.9 30V16.3h1.3c2.1 0 3.9-1.6 3.9-3.7s-1.7-3.8-3.8-3.8H2.5')

Numeral

To use with numerals like number, unique identifier like IBAN, Phone number, Price …

<span class="prismea-numeral">+33 8 36 65 65 65</span>
span.prismea-numeral +33 8 36 65 65 65

Pre code

<pre class="prismea-pre-code language-json"><code>{
  "accept": [
    "application/json, text/plain, */*"
  ],
  "accept-encoding": [
    "gzip, deflate, br"
  ],
  "accept-language": [
    "en-US,en;q=0.9,fr-FR;q=0.8,fr;q=0.7"
  ],
  "User-Agent": [
    <span>"Prismea Dev/1.2.0 (com.prismea-dev.ios; build:1180; iOS 13.7.0) Alamofire/5.2.2"</span>
  ]
  "cookie": [
    "XXX"
  ],
  "dnt": [
    "1"
  ],
}</code></pre>
pre.prismea-pre-code.language-json
  code
    | {
  "accept": [
    "application/json, text/plain, */*"
  ],
  "accept-encoding": [
    "gzip, deflate, br"
  ],
  "accept-language": [
    "en-US,en;q=0.9,fr-FR;q=0.8,fr;q=0.7"
  ],
  "User-Agent": [
    
    span "Prismea Dev/1.2.0 (com.prismea-dev.ios; build:1180; iOS 13.7.0) Alamofire/5.2.2"
    | 
  ]
  "cookie": [
    "XXX"
  ],
  "dnt": [
    "1"
  ],
}

Progress Bar

<div class="prismea-sidebar-text prismea-numeral">1200 / 600 €</div>
<div class="prismea-progress-bar">
  <div class="prismea-progress-bar--filled" style="width: 50%"></div>
</div>
.prismea-sidebar-text.prismea-numeral 1200 / 600 €
.prismea-progress-bar
  .prismea-progress-bar--filled(style='width: 50%')

Spot

<a class="prismea-spot" href="#" title="Title"><i class="prismea-glyph-account"></i></a><a class="prismea-spot -selected" href="#" title="Title"><i class="prismea-glyph-account"></i></a>
a.prismea-spot(href='#', title='Title')
  i.prismea-glyph-account
a.prismea-spot.-selected(href='#', title='Title')
  i.prismea-glyph-account

Switch

<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch" disabled="disabled"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -on -pending " role="switch" aria-checked="true" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -on -with-label" role="switch" aria-checked="true" aria-label="Switch"><span class="prismea-switch--label -color-light">On</span><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -off -with-label" role="switch" aria-checked="false" aria-label="Switch"><span class="prismea-switch--label -color-light">No</span><i class="prismea-switch--button"></i>
</button>
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
  i.prismea-switch--button
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch', disabled)
  i.prismea-switch--button
button.prismea-switch.-on.-pending(role='switch', aria-checked='true', aria-label='Switch', title='Pending …')
  i.prismea-switch--button
button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
  i.prismea-switch--button
button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
  i.prismea-switch--button
button.prismea-switch.-on.-with-label(role='switch', aria-checked='true', aria-label='Switch')
  span.prismea-switch--label.-color-light On
  i.prismea-switch--button
button.prismea-switch.-off.-with-label(role='switch', aria-checked='false', aria-label='Switch')
  span.prismea-switch--label.-color-light No
  i.prismea-switch--button

Tab

<a class="prismea-tab" href="#">Some tab</a><a class="prismea-tab -selected" href="#">Some tab</a>
a.prismea-tab(href='#') Some tab
a.prismea-tab.-selected(href='#') Some tab

Title

Title 1

<!-- Standard-->
<h1 class="prismea-title-1">Title 1</h1>
<!-- Standard (capitalize)-->
<h1 class="prismea-title-1 -capitalize">title 1 capitalized</h1>
<!-- Standard (uppercase)-->
<h1 class="prismea-title-1 -uppercase">Title 1 uppercased</h1>
<!-- Center aligned-->
<h1 class="prismea-title-1 -center">Title 1 center aligned</h1>
<!-- Center aligned (capitalize)-->
<h1 class="prismea-title-1 -center -capitalize">Title 1 center aligned capitalized</h1>
<!-- Center aligned (uppercase)-->
<h1 class="prismea-title-1 -center -uppercase">Title 1 center aligned uppercased</h1>
//  Standard
h1.prismea-title-1 Title 1
//  Standard (capitalize)
h1.prismea-title-1.-capitalize title 1 capitalized
//  Standard (uppercase)
h1.prismea-title-1.-uppercase Title 1 uppercased
//  Center aligned
h1.prismea-title-1.-center Title 1 center aligned
//  Center aligned (capitalize)
h1.prismea-title-1.-center.-capitalize Title 1 center aligned capitalized
//  Center aligned (uppercase)
h1.prismea-title-1.-center.-uppercase Title 1 center aligned uppercased

Title 2

<!-- Standard-->
<h1 class="prismea-title-2">Title 2</h1>
<!-- Standard (capitalize)-->
<h1 class="prismea-title-2 -capitalize">title 2 capitalized</h1>
<!-- Standard (uppercase)-->
<h1 class="prismea-title-2 -uppercase">Title 2 uppercased</h1>
<!-- Center aligned-->
<h1 class="prismea-title-2 -center">Title 2 center aligned</h1>
<!-- Center aligned (capitalize)-->
<h1 class="prismea-title-2 -center -capitalize">Title 2 center aligned capitalized</h1>
<!-- Center aligned (uppercase)-->
<h1 class="prismea-title-2 -center -uppercase">Title 2 center aligned uppercased</h1>
//  Standard
h1.prismea-title-2 Title 2
//  Standard (capitalize)
h1.prismea-title-2.-capitalize title 2 capitalized
//  Standard (uppercase)
h1.prismea-title-2.-uppercase Title 2 uppercased
//  Center aligned
h1.prismea-title-2.-center Title 2 center aligned
//  Center aligned (capitalize)
h1.prismea-title-2.-center.-capitalize Title 2 center aligned capitalized
//  Center aligned (uppercase)
h1.prismea-title-2.-center.-uppercase Title 2 center aligned uppercased

Title 3

<!-- Standard-->
<h1 class="prismea-title-3">Title 3</h1>
<!-- Standard (capitalize)-->
<h1 class="prismea-title-3 -capitalize">Title 3 capitalized</h1>
<!-- Standard (uppercase)-->
<h1 class="prismea-title-3 -uppercase">Title 3 uppercased</h1>
<!-- Center aligned-->
<h1 class="prismea-title-3 -center">Title 3 center aligned</h1>
<!-- Center aligned (capitalize)-->
<h1 class="prismea-title-3 -center -capitalize">Title 3 center aligned capitalized</h1>
<!-- Center aligned (uppercase)-->
<h1 class="prismea-title-3 -center -uppercase">Title 3 center aligned uppercased</h1>
//  Standard
h1.prismea-title-3 Title 3
//  Standard (capitalize)
h1.prismea-title-3.-capitalize Title 3 capitalized
//  Standard (uppercase)
h1.prismea-title-3.-uppercase Title 3 uppercased
//  Center aligned
h1.prismea-title-3.-center Title 3 center aligned
//  Center aligned (capitalize)
h1.prismea-title-3.-center.-capitalize Title 3 center aligned capitalized
//  Center aligned (uppercase)
h1.prismea-title-3.-center.-uppercase Title 3 center aligned uppercased

Text

You can use the following variants:

  • Alignment: -left, -right, -center
  • Size: -text-sm, -text-md, -text-xl
  • Weight: -text-lighter, -text-normal, -text-bold, -text-bolder
  • Word break: -break-text
  • Decoration: -line-through
  • Transforms: -uppercase, -capitalize

To make line return visible, you can use -text-multiline

<p class="prismea-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.

</p>
<p class="prismea-text -center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.

</p>
<p class="prismea-text -text-multiline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.

</p>
<p class="prismea-text -line-through">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.

</p>
<p class="prismea-text -capitalize">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.

</p>
<p class="prismea-text -uppercase">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.

</p>
<p class="prismea-text -break-text">http://chart.apis.google.com/chartchs=500x500&chma=0,0,100,100&cht=p&chco=FF0000%2CFFFF00%7CFF8000%2C00FF00%7C00FF00%2C0000FF&chd=t%3A122%2C42%2C17%2C10%2C8%2C7%2C7%2C7%2C7%2C6%2C6%2C6%2C6%2C5%2C5&chl=122%7C42%7C17%7C10%7C8%7C7%7C7%7C7%7C7%7C6%7C6%7C6%7C6%7C5%7C5&chdl=android%7Cjava%7Cstack-trace%7Cbroadcastreceiver%7Candroid-ndk%7Cuser-agent%7Candroid-webview%7Cwebview%7Cbackground%7Cmultithreading%7Candroid-source%7Csms%7Cadb%7Csollections%7Cactivity|Chart
</p>
p.prismea-text.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
  
p.prismea-text.-center.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
  
p.prismea-text.-text-multiline.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
  
p.prismea-text.-line-through.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
  
p.prismea-text.-capitalize.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
  
p.prismea-text.-uppercase.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
  
p.prismea-text.-break-text.
  http://chart.apis.google.com/chartchs=500x500&chma=0,0,100,100&cht=p&chco=FF0000%2CFFFF00%7CFF8000%2C00FF00%7C00FF00%2C0000FF&chd=t%3A122%2C42%2C17%2C10%2C8%2C7%2C7%2C7%2C7%2C6%2C6%2C6%2C6%2C5%2C5&chl=122%7C42%7C17%7C10%7C8%7C7%7C7%7C7%7C7%7C6%7C6%7C6%7C6%7C5%7C5&chdl=android%7Cjava%7Cstack-trace%7Cbroadcastreceiver%7Candroid-ndk%7Cuser-agent%7Candroid-webview%7Cwebview%7Cbackground%7Cmultithreading%7Candroid-source%7Csms%7Cadb%7Csollections%7Cactivity|Chart
  

Tooltip

Used as an additional information when hovering a button per instance

You can use one of the following variants:

  • Position: -left, -right
<div class="prismea-vertical-spacing-20">
  <div class="prismea-vertical-spacing-20--slot -center">
    <div class="-has-tooltip" style="width: 200px; height: 20px; background-color: blue; margin: 0 auto;">
      <div class="prismea-tooltip -left" style="opacity:1;">I am on the left</div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-20--slot -center">
    <div class="-has-tooltip" style="width: 200px; height: 20px; background-color: yellow; margin: 0 auto;">
      <div class="prismea-tooltip -right" style="opacity:1;">I am on the right</div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-20--slot -center">
    <div class="-has-tooltip" style="width: 200px; height: 20px; background-color: yellow; margin: 0 auto;">
      <div class="prismea-tooltip" style="opacity:1;">I am in neither</div>
    </div>
  </div>
</div>
.prismea-vertical-spacing-20
  .prismea-vertical-spacing-20--slot.-center
    .-has-tooltip(style='width: 200px; height: 20px; background-color: blue; margin: 0 auto;')
      .prismea-tooltip.-left(style='opacity:1;') I am on the left
  .prismea-vertical-spacing-20--slot.-center
    .-has-tooltip(style='width: 200px; height: 20px; background-color: yellow; margin: 0 auto;')
      .prismea-tooltip.-right(style='opacity:1;') I am on the right
  .prismea-vertical-spacing-20--slot.-center
    .-has-tooltip(style='width: 200px; height: 20px; background-color: yellow; margin: 0 auto;')
      .prismea-tooltip(style='opacity:1;') I am in neither

Design System

Avatar

<table class="pl-doc-avatar-table">
  <thead>
    <tr>
      <th>SM - 24</th>
      <th>MD -32</th>
      <th>LG -40</th>
      <th>XL - 48</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="center">
        <div class="avatar avatar--sm border-radius-rounded"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--md border-radius-rounded"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--lg border-radius-rounded"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--xl border-radius-rounded"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
      </td>
      <td>User with image</td>
    </tr>
    <tr>
      <td align="center">
        <div class="avatar avatar--sm border-radius-rounded"><span>PN</span>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--md border-radius-rounded"><span>PN</span>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--lg border-radius-rounded"><span>PN</span>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--xl border-radius-rounded"><span>PN</span>
        </div>
      </td>
      <td>User without image</td>
    </tr>
    <tr>
      <td align="center">
        <div class="avatar avatar--sm border-radius-rounded">
          <svg class="icon-16 icon-color-grey--600">
            <use href="/svg/16x16/bold/user.svg#user-bold-16"></use>
          </svg>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--md border-radius-rounded">
          <svg class="icon-24 icon-color-grey--600">
            <use href="/svg/24x24/line/user.svg#user-line-24"></use>
          </svg>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--lg border-radius-rounded">
          <svg class="icon-24 icon-color-grey--600">
            <use href="/svg/24x24/line/user.svg#user-line-24"></use>
          </svg>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--xl border-radius-rounded">
          <svg class="icon-40 icon-color-grey--600">
            <use href="/svg/40x40/line/user.svg#user-line-40"></use>
          </svg>
        </div>
      </td>
      <td>User with icon</td>
    </tr>
    <tr>
      <td align="center">
        <div class="avatar avatar--sm border-radius-4"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--md border-radius-4"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--lg border-radius-4"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--xl border-radius-4"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
      </td>
      <td>Company with image</td>
    </tr>
    <tr>
      <td align="center">
        <div class="avatar avatar--sm border-radius-4"><span>PN</span>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--md border-radius-4"><span>PN</span>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--lg border-radius-4"><span>PN</span>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--xl border-radius-4"><span>PN</span>
        </div>
      </td>
      <td>Company without image</td>
    </tr>
    <tr>
      <td align="center">
        <div class="avatar avatar--sm border-radius-4">
          <svg class="icon-16 icon-color-grey--600">
            <use href="/svg/16x16/bold/company.svg#company-bold-16"></use>
          </svg>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--md border-radius-4">
          <svg class="icon-24 icon-color-grey--600">
            <use href="/svg/24x24/line/company.svg#company-line-24"></use>
          </svg>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--lg border-radius-4">
          <svg class="icon-24 icon-color-grey--600">
            <use href="/svg/24x24/line/company.svg#company-line-24"></use>
          </svg>
        </div>
      </td>
      <td align="center">
        <div class="avatar avatar--xl border-radius-4">
          <svg class="icon-40 icon-color-grey--600">
            <use href="/svg/40x40/line/company.svg#company-line-40"></use>
          </svg>
        </div>
      </td>
      <td>Company with icon</td>
    </tr>
  </tbody>
</table>
<style>
  .pl-doc-avatar-table th {
    width: 75px;
  }
  .pl-doc-avatar-table tbody tr {
    height: 75px;
  }
</style>
table.pl-doc-avatar-table
  thead
    tr
      th SM - 24
      th MD -32
      th LG -40
      th XL - 48
  tbody
    tr
      td(align='center')
        .avatar.avatar--sm.border-radius-rounded
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
      td(align='center')
        .avatar.avatar--md.border-radius-rounded
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
      td(align='center')
        .avatar.avatar--lg.border-radius-rounded
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
      td(align='center')
        .avatar.avatar--xl.border-radius-rounded
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
      td User with image
    tr
      td(align='center')
        .avatar.avatar--sm.border-radius-rounded
          span PN
      td(align='center')
        .avatar.avatar--md.border-radius-rounded
          span PN
      td(align='center')
        .avatar.avatar--lg.border-radius-rounded
          span PN
      td(align='center')
        .avatar.avatar--xl.border-radius-rounded
          span PN
      td User without image
    tr
      td(align='center')
        .avatar.avatar--sm.border-radius-rounded
          svg.icon-16.icon-color-grey--600
            use(href='/svg/16x16/bold/user.svg#user-bold-16')
      td(align='center')
        .avatar.avatar--md.border-radius-rounded
          svg.icon-24.icon-color-grey--600
            use(href='/svg/24x24/line/user.svg#user-line-24')
      td(align='center')
        .avatar.avatar--lg.border-radius-rounded
          svg.icon-24.icon-color-grey--600
            use(href='/svg/24x24/line/user.svg#user-line-24')
      td(align='center')
        .avatar.avatar--xl.border-radius-rounded
          svg.icon-40.icon-color-grey--600
            use(href='/svg/40x40/line/user.svg#user-line-40')
      td User with icon
    tr
      td(align='center')
        .avatar.avatar--sm.border-radius-4
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
      td(align='center')
        .avatar.avatar--md.border-radius-4
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
      td(align='center')
        .avatar.avatar--lg.border-radius-4
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
      td(align='center')
        .avatar.avatar--xl.border-radius-4
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
      td Company with image
    tr
      td(align='center')
        .avatar.avatar--sm.border-radius-4
          span PN
      td(align='center')
        .avatar.avatar--md.border-radius-4
          span PN
      td(align='center')
        .avatar.avatar--lg.border-radius-4
          span PN
      td(align='center')
        .avatar.avatar--xl.border-radius-4
          span PN
      td Company without image
    tr
      td(align='center')
        .avatar.avatar--sm.border-radius-4
          svg.icon-16.icon-color-grey--600
            use(href='/svg/16x16/bold/company.svg#company-bold-16')
      td(align='center')
        .avatar.avatar--md.border-radius-4
          svg.icon-24.icon-color-grey--600
            use(href='/svg/24x24/line/company.svg#company-line-24')
      td(align='center')
        .avatar.avatar--lg.border-radius-4
          svg.icon-24.icon-color-grey--600
            use(href='/svg/24x24/line/company.svg#company-line-24')
      td(align='center')
        .avatar.avatar--xl.border-radius-4
          svg.icon-40.icon-color-grey--600
            use(href='/svg/40x40/line/company.svg#company-line-40')
      td Company with icon
style.
  
  .pl-doc-avatar-table th {
      width: 75px;
    }
    .pl-doc-avatar-table tbody tr {
      height: 75px;
    }
  

Chips

<h3 class="title-3">Default/Hover</h3>
<div class="tikui-spacer">
  <div class="chip bg-color-grey--50 box-shadow-color-grey--600 color-grey--600"><span class="text-bold">Chip</span>
  </div>
  <div class="chip bg-color-primary--50 box-shadow-color-primary--600 color-primary--600"><span class="text-bold">Chip</span>
  </div>
  <div class="chip bg-color-success--50 box-shadow-color-success--600 color-success--600"><span class="text-bold">Chip</span>
  </div>
  <div class="chip bg-color-warning--50 box-shadow-color-warning--600 color-warning--600"><span class="text-bold">Chip</span>
  </div>
  <div class="chip bg-color-error--50 box-shadow-color-error--600 color-error--600"><span class="text-bold">Chip</span>
  </div>
</div>
<h3 class="title-3">Selected</h3>
<div class="tikui-spacer">
  <div class="chip bg-color-grey--600 box-shadow-color-grey--600 color-grey--50"><span class="text-bold">Chip</span>
  </div>
  <div class="chip bg-color-primary--600 box-shadow-color-primary--600 color-primary--50"><span class="text-bold">Chip</span>
  </div>
  <div class="chip bg-color-success--600 box-shadow-color-success--600 color-success--50"><span class="text-bold">Chip</span>
  </div>
  <div class="chip bg-color-warning--600 box-shadow-color-warning--600 color-warning--50"><span class="text-bold">Chip</span>
  </div>
  <div class="chip bg-color-error--600 box-shadow-color-error--600 color-error--50"><span class="text-bold">Chip</span>
  </div>
</div>
<h3 class="title-3">With Icon</h3>
<div class="tikui-spacer">
  <div class="chip bg-color-grey--50 box-shadow-color-grey--600 color-grey--600">
    <div class="chip__icon">
      <svg class="icon-24 icon-color-grey--600">
        <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
      </svg>
    </div><span class="text-bold">Chip</span>
  </div>
  <div class="chip bg-color-primary--50 box-shadow-color-primary--600 color-primary--600">
    <div class="chip__icon">
      <svg class="icon-24 icon-color-primary--600">
        <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
      </svg>
    </div><span class="text-bold">Chip</span>
  </div>
  <div class="chip bg-color-success--50 box-shadow-color-success--600 color-success--600">
    <div class="chip__icon">
      <svg class="icon-24 icon-color-success--600">
        <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
      </svg>
    </div><span class="text-bold">Chip</span>
  </div>
  <div class="chip bg-color-warning--50 box-shadow-color-warning--600 color-warning--600">
    <div class="chip__icon">
      <svg class="icon-24 icon-color-warning--600">
        <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
      </svg>
    </div><span class="text-bold">Chip</span>
  </div>
  <div class="chip bg-color-error--50 box-shadow-color-error--600 color-error--600">
    <div class="chip__icon">
      <svg class="icon-24 icon-color-error--600">
        <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
      </svg>
    </div><span class="text-bold">Chip</span>
  </div>
</div>
h3.title-3 Default/Hover
.tikui-spacer
  .chip.bg-color-grey--50.box-shadow-color-grey--600.color-grey--600
    span.text-bold Chip
  .chip.bg-color-primary--50.box-shadow-color-primary--600.color-primary--600
    span.text-bold Chip
  .chip.bg-color-success--50.box-shadow-color-success--600.color-success--600
    span.text-bold Chip
  .chip.bg-color-warning--50.box-shadow-color-warning--600.color-warning--600
    span.text-bold Chip
  .chip.bg-color-error--50.box-shadow-color-error--600.color-error--600
    span.text-bold Chip
h3.title-3 Selected
.tikui-spacer
  .chip.bg-color-grey--600.box-shadow-color-grey--600.color-grey--50
    span.text-bold Chip
  .chip.bg-color-primary--600.box-shadow-color-primary--600.color-primary--50
    span.text-bold Chip
  .chip.bg-color-success--600.box-shadow-color-success--600.color-success--50
    span.text-bold Chip
  .chip.bg-color-warning--600.box-shadow-color-warning--600.color-warning--50
    span.text-bold Chip
  .chip.bg-color-error--600.box-shadow-color-error--600.color-error--50
    span.text-bold Chip
h3.title-3 With Icon
.tikui-spacer
  .chip.bg-color-grey--50.box-shadow-color-grey--600.color-grey--600
    .chip__icon
      svg.icon-24.icon-color-grey--600
        use(href='/svg/24x24/line/shop.svg#shop-line-24')
    span.text-bold Chip
  .chip.bg-color-primary--50.box-shadow-color-primary--600.color-primary--600
    .chip__icon
      svg.icon-24.icon-color-primary--600
        use(href='/svg/24x24/line/shop.svg#shop-line-24')
    span.text-bold Chip
  .chip.bg-color-success--50.box-shadow-color-success--600.color-success--600
    .chip__icon
      svg.icon-24.icon-color-success--600
        use(href='/svg/24x24/line/shop.svg#shop-line-24')
    span.text-bold Chip
  .chip.bg-color-warning--50.box-shadow-color-warning--600.color-warning--600
    .chip__icon
      svg.icon-24.icon-color-warning--600
        use(href='/svg/24x24/line/shop.svg#shop-line-24')
    span.text-bold Chip
  .chip.bg-color-error--50.box-shadow-color-error--600.color-error--600
    .chip__icon
      svg.icon-24.icon-color-error--600
        use(href='/svg/24x24/line/shop.svg#shop-line-24')
    span.text-bold Chip

Icons

To use a different icon you need to do several things:

  1. Include it in its corresponding folder by size: /svg/16x16 or /svg/24x24 etc.
  2. In the svg file, remove the fill property from the svg tag.
  3. Add an id to the svg with the name of the icon, as such: <svg id="validate-24">.
  4. In the path tag, change the fill property to inherit: fill="inherit"
  5. Also in path, change the fill-rule property to inherit: fill-rule="inherit"

Remember to add examples of the icon in src/atom/_design-system/icon/icon.code.pug. Also, you may need to add the required css in src/atom/_design-system/icon/_icon.scss if it's not yet there.

Warning!
The size (ex: 24x24) refers here to the size of the icon box, including the inside padding. The icon might be smaller.
<div class="flex">
  <div class="mr-20">
    <h3 class="title-3">Variations</h3>
    <svg class="icon-40">
      <use href="/svg/40x40/line/validate-alt.svg#validate-alt-line-40"></use>
    </svg>
    <svg class="icon-40 icon-color-primary--700">
      <use href="/svg/40x40/line/validate-alt.svg#validate-alt-line-40"></use>
    </svg>
    <svg class="icon-40 icon-color-white border-radius-rounded bg-color-primary--500">
      <use href="/svg/40x40/line/validate-alt.svg#validate-alt-line-40"></use>
    </svg>
    <svg class="icon-40">
      <use href="/svg/40x40/bold/validate.svg#validate-bold-40"></use>
    </svg>
    <svg class="icon-40 icon-color-warning--500">
      <use href="/svg/40x40/bold/validate.svg#validate-bold-40"></use>
    </svg>
  </div>
  <div class="mr-20">
    <h3 class="title-3">Rotations</h3>
    <svg class="icon-32">
      <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
    </svg>
    <svg class="icon-32 icon-rotate-45">
      <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
    </svg>
    <svg class="icon-32 icon-rotate-90">
      <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
    </svg>
    <svg class="icon-32 icon-rotate-135">
      <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
    </svg>
    <svg class="icon-32 icon-rotate-180">
      <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
    </svg>
    <svg class="icon-32 icon-rotate-225">
      <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
    </svg>
    <svg class="icon-32 icon-rotate-270">
      <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
    </svg>
    <svg class="icon-32 icon-rotate-315">
      <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
    </svg>
  </div>
  <div class="mr-20">
    <h3 class="title-3">Styles</h3>
    <div class="flex flex-align-center"><span>Line:</span>
      <div class="mr-4 flex">
        <svg class="icon-24 icon-color-grey--600">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg>
      </div><span>Bold:</span>
      <div class="mr-4 flex">
        <svg class="icon-24 icon-color-grey--600">
          <use href="/svg/24x24/bold/dashboard.svg#dashboard-bold-24"></use>
        </svg>
      </div><span>Duotone:</span>
      <div class="mr-4 flex">
        <svg class="icon-24 icon-color-primary--100 color-primary--600">
          <use href="/svg/24x24/duotone/dashboard.svg#dashboard-duotone-24"></use>
        </svg>
      </div>
    </div>
  </div>
</div>
<style>
  .pldoc-icons-table-responsive {
    overflow: auto;
    max-width: 100%;
    height: 555px;
    border: 1px solid #ccc;
  }
  .pldoc-icons-table {
    border-collapse: collapse;
    background: #fff;
    min-width: 100%;
  }
  .pldoc-icons-table thead {
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .pldoc-icons-table th,
  .pldoc-icons-table td {
    text-align: center;
    overflow: hidden;
    width: 6rem;
    min-width: 6rem;
    box-shadow: inset -1px -1px 0 #ccc;
  }
  .pldoc-icons-table td {
    background: #fff;
    padding: 0.8rem 0;
  }
  .pldoc-icons-table td svg {
    outline: 1px dashed rgba(0, 0, 255, 0.2);
    vertical-align: -0.2em;
  }
  .pldoc-icons-table th {
    background: #f5f5f5;
    font-weight: 500;
    padding: 0.8rem 0;
  }
  .pldoc-icons-table .pldoc-icons-table-left-col {
    position: sticky;
    left: 0;
    z-index: 10;
    text-align: left;
    padding:  0.8rem 1.6rem;
  }
  
</style>
<h3 class="title-3">Available icons</h3>
<div class="pldoc-icons-table-responsive">
  <table class="pldoc-icons-table">
    <thead>
      <tr>
        <th class="pldoc-icons-table-left-col" rowspan="2"></th>
        <th colspan="3">40x40</th>
        <th colspan="3">32x32</th>
        <th colspan="3">24x24</th>
        <th colspan="3">16x16</th>
      </tr>
      <tr>
        <th>bold</th>
        <th>line</th>
        <th>duotone</th>
        <th>bold</th>
        <th>line</th>
        <th>duotone</th>
        <th>bold</th>
        <th>line</th>
        <th>duotone</th>
        <th>bold</th>
        <th>line</th>
        <th>duotone</th>
      </tr>
    </thead>
    <tbody>
      <tr title="arrow-up">
        <td class="pldoc-icons-table-left-col">arrow-up</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/arrow-up.svg#arrow-up-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/arrow-up.svg#arrow-up-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/arrow-up.svg#arrow-up-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/arrow-up.svg#arrow-up-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/arrow-up.svg#arrow-up-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/arrow-up.svg#arrow-up-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/arrow-up.svg#arrow-up-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/arrow-up.svg#arrow-up-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/arrow-up.svg#arrow-up-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/arrow-up.svg#arrow-up-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/arrow-up.svg#arrow-up-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="balance">
        <td class="pldoc-icons-table-left-col">balance</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/balance.svg#balance-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/balance.svg#balance-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/balance.svg#balance-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/balance.svg#balance-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/balance.svg#balance-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/balance.svg#balance-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/balance.svg#balance-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/balance.svg#balance-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/balance.svg#balance-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/balance.svg#balance-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/balance.svg#balance-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/balance.svg#balance-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="bank">
        <td class="pldoc-icons-table-left-col">bank</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/bank.svg#bank-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/bank.svg#bank-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/bank.svg#bank-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/bank.svg#bank-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/bank.svg#bank-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/bank.svg#bank-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/bank.svg#bank-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/bank.svg#bank-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/bank.svg#bank-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/bank.svg#bank-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/bank.svg#bank-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/bank.svg#bank-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="bell">
        <td class="pldoc-icons-table-left-col">bell</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/bell.svg#bell-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/bell.svg#bell-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/bell.svg#bell-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/bell.svg#bell-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/bell.svg#bell-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/bell.svg#bell-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/bell.svg#bell-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/bell.svg#bell-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/bell.svg#bell-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/bell.svg#bell-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/bell.svg#bell-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/bell.svg#bell-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="briefcase">
        <td class="pldoc-icons-table-left-col">briefcase</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/briefcase.svg#briefcase-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/briefcase.svg#briefcase-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/briefcase.svg#briefcase-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/briefcase.svg#briefcase-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/briefcase.svg#briefcase-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/briefcase.svg#briefcase-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/briefcase.svg#briefcase-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/briefcase.svg#briefcase-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/briefcase.svg#briefcase-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/briefcase.svg#briefcase-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/briefcase.svg#briefcase-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/briefcase.svg#briefcase-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="capital">
        <td class="pldoc-icons-table-left-col">capital</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/capital.svg#capital-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/capital.svg#capital-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/capital.svg#capital-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/capital.svg#capital-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/capital.svg#capital-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/capital.svg#capital-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/capital.svg#capital-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/capital.svg#capital-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/capital.svg#capital-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/capital.svg#capital-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/capital.svg#capital-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/capital.svg#capital-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="car">
        <td class="pldoc-icons-table-left-col">car</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/car.svg#car-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/car.svg#car-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/car.svg#car-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/car.svg#car-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/car.svg#car-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/car.svg#car-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/car.svg#car-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/car.svg#car-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/car.svg#car-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/car.svg#car-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/car.svg#car-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/car.svg#car-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="category">
        <td class="pldoc-icons-table-left-col">category</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/category.svg#category-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/category.svg#category-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/category.svg#category-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/category.svg#category-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/category.svg#category-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/category.svg#category-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/category.svg#category-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/category.svg#category-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/category.svg#category-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/category.svg#category-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/category.svg#category-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/category.svg#category-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="chart-bar-alt">
        <td class="pldoc-icons-table-left-col">chart-bar-alt</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/chart-bar-alt.svg#chart-bar-alt-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/chart-bar-alt.svg#chart-bar-alt-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/chart-bar-alt.svg#chart-bar-alt-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/chart-bar-alt.svg#chart-bar-alt-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/chart-bar-alt.svg#chart-bar-alt-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/chart-bar-alt.svg#chart-bar-alt-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/chart-bar-alt.svg#chart-bar-alt-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/chart-bar-alt.svg#chart-bar-alt-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/chart-bar-alt.svg#chart-bar-alt-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/chart-bar-alt.svg#chart-bar-alt-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chart-bar-alt.svg#chart-bar-alt-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/chart-bar-alt.svg#chart-bar-alt-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="chart-bar-variant">
        <td class="pldoc-icons-table-left-col">chart-bar-variant</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/chart-bar-variant.svg#chart-bar-variant-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/chart-bar-variant.svg#chart-bar-variant-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/chart-bar-variant.svg#chart-bar-variant-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/chart-bar-variant.svg#chart-bar-variant-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/chart-bar-variant.svg#chart-bar-variant-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/chart-bar-variant.svg#chart-bar-variant-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/chart-bar-variant.svg#chart-bar-variant-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/chart-bar-variant.svg#chart-bar-variant-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/chart-bar-variant.svg#chart-bar-variant-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/chart-bar-variant.svg#chart-bar-variant-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chart-bar-variant.svg#chart-bar-variant-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/chart-bar-variant.svg#chart-bar-variant-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="chart-bar-line">
        <td class="pldoc-icons-table-left-col">chart-bar-line</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/chart-bar-line.svg#chart-bar-line-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/chart-bar-line.svg#chart-bar-line-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/chart-bar-line.svg#chart-bar-line-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/chart-bar-line.svg#chart-bar-line-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/chart-bar-line.svg#chart-bar-line-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/chart-bar-line.svg#chart-bar-line-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/chart-bar-line.svg#chart-bar-line-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/chart-bar-line.svg#chart-bar-line-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/chart-bar-line.svg#chart-bar-line-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chart-bar-line.svg#chart-bar-line-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/chart-bar-line.svg#chart-bar-line-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="chart-bar">
        <td class="pldoc-icons-table-left-col">chart-bar</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/chart-bar.svg#chart-bar-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/chart-bar.svg#chart-bar-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/chart-bar.svg#chart-bar-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/chart-bar.svg#chart-bar-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/chart-bar.svg#chart-bar-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/chart-bar.svg#chart-bar-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/chart-bar.svg#chart-bar-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/chart-bar.svg#chart-bar-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/chart-bar.svg#chart-bar-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/chart-bar.svg#chart-bar-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chart-bar.svg#chart-bar-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/chart-bar.svg#chart-bar-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="chart-line-alt">
        <td class="pldoc-icons-table-left-col">chart-line-alt</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/chart-line-alt.svg#chart-line-alt-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/chart-line-alt.svg#chart-line-alt-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/chart-line-alt.svg#chart-line-alt-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/chart-line-alt.svg#chart-line-alt-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/chart-line-alt.svg#chart-line-alt-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/chart-line-alt.svg#chart-line-alt-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/chart-line-alt.svg#chart-line-alt-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/chart-line-alt.svg#chart-line-alt-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/chart-line-alt.svg#chart-line-alt-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/chart-line-alt.svg#chart-line-alt-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chart-line-alt.svg#chart-line-alt-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/chart-line-alt.svg#chart-line-alt-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="chart-line">
        <td class="pldoc-icons-table-left-col">chart-line</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/chart-line.svg#chart-line-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/chart-line.svg#chart-line-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/chart-line.svg#chart-line-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/chart-line.svg#chart-line-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/chart-line.svg#chart-line-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/chart-line.svg#chart-line-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/chart-line.svg#chart-line-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/chart-line.svg#chart-line-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/chart-line.svg#chart-line-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/chart-line.svg#chart-line-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chart-line.svg#chart-line-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/chart-line.svg#chart-line-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="chart-pie">
        <td class="pldoc-icons-table-left-col">chart-pie</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/chart-pie.svg#chart-pie-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/chart-pie.svg#chart-pie-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/chart-pie.svg#chart-pie-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/chart-pie.svg#chart-pie-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/chart-pie.svg#chart-pie-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/chart-pie.svg#chart-pie-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/chart-pie.svg#chart-pie-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/chart-pie.svg#chart-pie-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/chart-pie.svg#chart-pie-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/chart-pie.svg#chart-pie-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chart-pie.svg#chart-pie-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/chart-pie.svg#chart-pie-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="chat">
        <td class="pldoc-icons-table-left-col">chat</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/chat.svg#chat-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/chat.svg#chat-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/chat.svg#chat-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/chat.svg#chat-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/chat.svg#chat-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/chat.svg#chat-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/chat.svg#chat-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/chat.svg#chat-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/chat.svg#chat-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/chat.svg#chat-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chat.svg#chat-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/chat.svg#chat-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="check-authentification">
        <td class="pldoc-icons-table-left-col">check-authentification</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/check-authentification.svg#check-authentification-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/check-authentification.svg#check-authentification-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/check-authentification.svg#check-authentification-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/check-authentification.svg#check-authentification-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/check-authentification.svg#check-authentification-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/check-authentification.svg#check-authentification-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/check-authentification.svg#check-authentification-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/check-authentification.svg#check-authentification-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/check-authentification.svg#check-authentification-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/check-authentification.svg#check-authentification-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/check-authentification.svg#check-authentification-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/check-authentification.svg#check-authentification-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="chevron-down">
        <td class="pldoc-icons-table-left-col">chevron-down</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/chevron-down.svg#chevron-down-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/chevron-down.svg#chevron-down-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/chevron-down.svg#chevron-down-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/chevron-down.svg#chevron-down-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/chevron-down.svg#chevron-down-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/chevron-down.svg#chevron-down-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/chevron-down.svg#chevron-down-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/chevron-down.svg#chevron-down-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/chevron-down.svg#chevron-down-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/chevron-down.svg#chevron-down-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chevron-down.svg#chevron-down-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/chevron-down.svg#chevron-down-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="clock">
        <td class="pldoc-icons-table-left-col">clock</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/clock.svg#clock-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/clock.svg#clock-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/clock.svg#clock-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/clock.svg#clock-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/clock.svg#clock-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/clock.svg#clock-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/clock.svg#clock-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/clock.svg#clock-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/clock.svg#clock-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/clock.svg#clock-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/clock.svg#clock-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/clock.svg#clock-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="company">
        <td class="pldoc-icons-table-left-col">company</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/company.svg#company-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/company.svg#company-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/company.svg#company-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/company.svg#company-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/company.svg#company-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/company.svg#company-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/company.svg#company-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/company.svg#company-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/company.svg#company-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/company.svg#company-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/company.svg#company-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/company.svg#company-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="credit-card">
        <td class="pldoc-icons-table-left-col">credit-card</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/credit-card.svg#credit-card-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/credit-card.svg#credit-card-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/credit-card.svg#credit-card-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/credit-card.svg#credit-card-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/credit-card.svg#credit-card-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/credit-card.svg#credit-card-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/credit-card.svg#credit-card-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/credit-card.svg#credit-card-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/credit-card.svg#credit-card-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/credit-card.svg#credit-card-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/credit-card.svg#credit-card-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/credit-card.svg#credit-card-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="dashboard">
        <td class="pldoc-icons-table-left-col">dashboard</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/dashboard.svg#dashboard-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/dashboard.svg#dashboard-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/dashboard.svg#dashboard-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/dashboard.svg#dashboard-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/dashboard.svg#dashboard-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/dashboard.svg#dashboard-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/dashboard.svg#dashboard-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/dashboard.svg#dashboard-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/dashboard.svg#dashboard-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/dashboard.svg#dashboard-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/dashboard.svg#dashboard-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="direct-debit">
        <td class="pldoc-icons-table-left-col">direct-debit</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/direct-debit.svg#direct-debit-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/direct-debit.svg#direct-debit-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/direct-debit.svg#direct-debit-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/direct-debit.svg#direct-debit-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/direct-debit.svg#direct-debit-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/direct-debit.svg#direct-debit-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/direct-debit.svg#direct-debit-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/direct-debit.svg#direct-debit-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/direct-debit.svg#direct-debit-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/direct-debit.svg#direct-debit-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/direct-debit.svg#direct-debit-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/direct-debit.svg#direct-debit-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="discount">
        <td class="pldoc-icons-table-left-col">discount</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/discount.svg#discount-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/discount.svg#discount-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/discount.svg#discount-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/discount.svg#discount-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/discount.svg#discount-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/discount.svg#discount-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/discount.svg#discount-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/discount.svg#discount-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/discount.svg#discount-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/discount.svg#discount-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/discount.svg#discount-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/discount.svg#discount-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="euro">
        <td class="pldoc-icons-table-left-col">euro</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/euro.svg#euro-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/euro.svg#euro-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/euro.svg#euro-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/euro.svg#euro-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/euro.svg#euro-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/euro.svg#euro-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/euro.svg#euro-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/euro.svg#euro-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/euro.svg#euro-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/euro.svg#euro-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/euro.svg#euro-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/euro.svg#euro-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="exit">
        <td class="pldoc-icons-table-left-col">exit</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/exit.svg#exit-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/exit.svg#exit-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/exit.svg#exit-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/exit.svg#exit-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/exit.svg#exit-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/exit.svg#exit-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/exit.svg#exit-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/exit.svg#exit-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/exit.svg#exit-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/exit.svg#exit-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/exit.svg#exit-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/exit.svg#exit-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="expand">
        <td class="pldoc-icons-table-left-col">expand</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/expand.svg#expand-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/expand.svg#expand-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/expand.svg#expand-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/expand.svg#expand-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/expand.svg#expand-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/expand.svg#expand-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/expand.svg#expand-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/expand.svg#expand-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/expand.svg#expand-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/expand.svg#expand-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/expand.svg#expand-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/expand.svg#expand-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="file">
        <td class="pldoc-icons-table-left-col">file</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/file.svg#file-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/file.svg#file-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/file.svg#file-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/file.svg#file-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/file.svg#file-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/file.svg#file-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/file.svg#file-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/file.svg#file-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/file.svg#file-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/file.svg#file-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/file.svg#file-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/file.svg#file-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="flag-FR">
        <td class="pldoc-icons-table-left-col">flag-FR</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/flag-FR.svg#flag-FR-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/flag-FR.svg#flag-FR-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/flag-FR.svg#flag-FR-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/flag-FR.svg#flag-FR-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/flag-FR.svg#flag-FR-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/flag-FR.svg#flag-FR-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/flag-FR.svg#flag-FR-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/flag-FR.svg#flag-FR-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/flag-FR.svg#flag-FR-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/flag-FR.svg#flag-FR-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/flag-FR.svg#flag-FR-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="flag-BE">
        <td class="pldoc-icons-table-left-col">flag-BE</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/flag-BE.svg#flag-BE-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/flag-BE.svg#flag-BE-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/flag-BE.svg#flag-BE-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/flag-BE.svg#flag-BE-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/flag-BE.svg#flag-BE-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/flag-BE.svg#flag-BE-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/flag-BE.svg#flag-BE-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/flag-BE.svg#flag-BE-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/flag-BE.svg#flag-BE-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/flag-BE.svg#flag-BE-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/flag-BE.svg#flag-BE-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="flag-DE">
        <td class="pldoc-icons-table-left-col">flag-DE</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/flag-DE.svg#flag-DE-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/flag-DE.svg#flag-DE-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/flag-DE.svg#flag-DE-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/flag-DE.svg#flag-DE-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/flag-DE.svg#flag-DE-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/flag-DE.svg#flag-DE-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/flag-DE.svg#flag-DE-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/flag-DE.svg#flag-DE-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/flag-DE.svg#flag-DE-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/flag-DE.svg#flag-DE-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/flag-DE.svg#flag-DE-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="flag-EN">
        <td class="pldoc-icons-table-left-col">flag-EN</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/flag-EN.svg#flag-EN-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/flag-EN.svg#flag-EN-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/flag-EN.svg#flag-EN-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/flag-EN.svg#flag-EN-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/flag-EN.svg#flag-EN-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/flag-EN.svg#flag-EN-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/flag-EN.svg#flag-EN-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/flag-EN.svg#flag-EN-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/flag-EN.svg#flag-EN-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/flag-EN.svg#flag-EN-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/flag-EN.svg#flag-EN-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="flag-ES">
        <td class="pldoc-icons-table-left-col">flag-ES</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/flag-ES.svg#flag-ES-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/flag-ES.svg#flag-ES-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/flag-ES.svg#flag-ES-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/flag-ES.svg#flag-ES-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/flag-ES.svg#flag-ES-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/flag-ES.svg#flag-ES-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/flag-ES.svg#flag-ES-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/flag-ES.svg#flag-ES-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/flag-ES.svg#flag-ES-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/flag-ES.svg#flag-ES-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/flag-ES.svg#flag-ES-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="flag-IT">
        <td class="pldoc-icons-table-left-col">flag-IT</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/flag-IT.svg#flag-IT-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/flag-IT.svg#flag-IT-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/flag-IT.svg#flag-IT-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/flag-IT.svg#flag-IT-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/flag-IT.svg#flag-IT-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/flag-IT.svg#flag-IT-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/flag-IT.svg#flag-IT-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/flag-IT.svg#flag-IT-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/flag-IT.svg#flag-IT-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/flag-IT.svg#flag-IT-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/flag-IT.svg#flag-IT-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="flag-SU">
        <td class="pldoc-icons-table-left-col">flag-SU</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/flag-SU.svg#flag-SU-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/flag-SU.svg#flag-SU-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/flag-SU.svg#flag-SU-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/flag-SU.svg#flag-SU-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/flag-SU.svg#flag-SU-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/flag-SU.svg#flag-SU-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/flag-SU.svg#flag-SU-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/flag-SU.svg#flag-SU-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/flag-SU.svg#flag-SU-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/flag-SU.svg#flag-SU-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/flag-SU.svg#flag-SU-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="flag-US">
        <td class="pldoc-icons-table-left-col">flag-US</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/flag-US.svg#flag-US-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/flag-US.svg#flag-US-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/flag-US.svg#flag-US-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/flag-US.svg#flag-US-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/flag-US.svg#flag-US-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/flag-US.svg#flag-US-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/flag-US.svg#flag-US-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/flag-US.svg#flag-US-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/flag-US.svg#flag-US-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/flag-US.svg#flag-US-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/flag-US.svg#flag-US-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="flash">
        <td class="pldoc-icons-table-left-col">flash</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/flash.svg#flash-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/flash.svg#flash-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/flash.svg#flash-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/flash.svg#flash-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/flash.svg#flash-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/flash.svg#flash-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/flash.svg#flash-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/flash.svg#flash-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/flash.svg#flash-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/flash.svg#flash-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/flash.svg#flash-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/flash.svg#flash-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="folder">
        <td class="pldoc-icons-table-left-col">folder</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/folder.svg#folder-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/folder.svg#folder-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/folder.svg#folder-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/folder.svg#folder-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/folder.svg#folder-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/folder.svg#folder-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/folder.svg#folder-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/folder.svg#folder-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/folder.svg#folder-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/folder.svg#folder-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/folder.svg#folder-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/folder.svg#folder-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="hammer">
        <td class="pldoc-icons-table-left-col">hammer</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/hammer.svg#hammer-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/hammer.svg#hammer-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/hammer.svg#hammer-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/hammer.svg#hammer-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/hammer.svg#hammer-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/hammer.svg#hammer-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/hammer.svg#hammer-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/hammer.svg#hammer-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/hammer.svg#hammer-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/hammer.svg#hammer-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/hammer.svg#hammer-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/hammer.svg#hammer-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="headphone">
        <td class="pldoc-icons-table-left-col">headphone</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/headphone.svg#headphone-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/headphone.svg#headphone-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/headphone.svg#headphone-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/headphone.svg#headphone-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/headphone.svg#headphone-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/headphone.svg#headphone-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/headphone.svg#headphone-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/headphone.svg#headphone-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/headphone.svg#headphone-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/headphone.svg#headphone-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/headphone.svg#headphone-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/headphone.svg#headphone-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="help">
        <td class="pldoc-icons-table-left-col">help</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/help.svg#help-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/help.svg#help-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/help.svg#help-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/help.svg#help-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/help.svg#help-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/help.svg#help-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/help.svg#help-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/help.svg#help-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/help.svg#help-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/help.svg#help-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/help.svg#help-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/help.svg#help-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="invest">
        <td class="pldoc-icons-table-left-col">invest</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/invest.svg#invest-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/invest.svg#invest-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/invest.svg#invest-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/invest.svg#invest-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/invest.svg#invest-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/invest.svg#invest-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/invest.svg#invest-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/invest.svg#invest-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/invest.svg#invest-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/invest.svg#invest-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/invest.svg#invest-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/invest.svg#invest-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="invoice">
        <td class="pldoc-icons-table-left-col">invoice</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/invoice.svg#invoice-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/invoice.svg#invoice-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/invoice.svg#invoice-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/invoice.svg#invoice-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/invoice.svg#invoice-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/invoice.svg#invoice-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/invoice.svg#invoice-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/invoice.svg#invoice-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/invoice.svg#invoice-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/invoice.svg#invoice-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/invoice.svg#invoice-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/invoice.svg#invoice-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="loan">
        <td class="pldoc-icons-table-left-col">loan</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/loan.svg#loan-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/loan.svg#loan-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/loan.svg#loan-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/loan.svg#loan-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/loan.svg#loan-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/loan.svg#loan-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/loan.svg#loan-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/loan.svg#loan-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/loan.svg#loan-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/loan.svg#loan-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/loan.svg#loan-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/loan.svg#loan-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="map-pin">
        <td class="pldoc-icons-table-left-col">map-pin</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/map-pin.svg#map-pin-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/map-pin.svg#map-pin-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/map-pin.svg#map-pin-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/map-pin.svg#map-pin-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/map-pin.svg#map-pin-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/map-pin.svg#map-pin-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/map-pin.svg#map-pin-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/map-pin.svg#map-pin-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/map-pin.svg#map-pin-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/map-pin.svg#map-pin-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/map-pin.svg#map-pin-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/map-pin.svg#map-pin-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="more-horizontal">
        <td class="pldoc-icons-table-left-col">more-horizontal</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/more-horizontal.svg#more-horizontal-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/more-horizontal.svg#more-horizontal-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/more-horizontal.svg#more-horizontal-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/more-horizontal.svg#more-horizontal-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/more-horizontal.svg#more-horizontal-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/more-horizontal.svg#more-horizontal-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/more-horizontal.svg#more-horizontal-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/more-horizontal.svg#more-horizontal-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/more-horizontal.svg#more-horizontal-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/more-horizontal.svg#more-horizontal-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/more-horizontal.svg#more-horizontal-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/more-horizontal.svg#more-horizontal-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="operations">
        <td class="pldoc-icons-table-left-col">operations</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/operations.svg#operations-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/operations.svg#operations-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/operations.svg#operations-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/operations.svg#operations-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/operations.svg#operations-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/operations.svg#operations-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/operations.svg#operations-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/operations.svg#operations-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/operations.svg#operations-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/operations.svg#operations-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/operations.svg#operations-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/operations.svg#operations-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="performance-increase">
        <td class="pldoc-icons-table-left-col">performance-increase</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/performance-increase.svg#performance-increase-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/performance-increase.svg#performance-increase-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/performance-increase.svg#performance-increase-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/performance-increase.svg#performance-increase-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/performance-increase.svg#performance-increase-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/performance-increase.svg#performance-increase-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/performance-increase.svg#performance-increase-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/performance-increase.svg#performance-increase-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/performance-increase.svg#performance-increase-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/performance-increase.svg#performance-increase-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/performance-increase.svg#performance-increase-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/performance-increase.svg#performance-increase-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="prismea">
        <td class="pldoc-icons-table-left-col">prismea</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/prismea.svg#prismea-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/prismea.svg#prismea-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/prismea.svg#prismea-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/prismea.svg#prismea-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/prismea.svg#prismea-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/prismea.svg#prismea-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/prismea.svg#prismea-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/prismea.svg#prismea-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/prismea.svg#prismea-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/prismea.svg#prismea-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/prismea.svg#prismea-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/prismea.svg#prismea-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="refresh">
        <td class="pldoc-icons-table-left-col">refresh</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/refresh.svg#refresh-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/refresh.svg#refresh-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/refresh.svg#refresh-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/refresh.svg#refresh-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/refresh.svg#refresh-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/refresh.svg#refresh-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/refresh.svg#refresh-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/refresh.svg#refresh-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/refresh.svg#refresh-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/refresh.svg#refresh-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/refresh.svg#refresh-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/refresh.svg#refresh-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="reject">
        <td class="pldoc-icons-table-left-col">reject</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/reject.svg#reject-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/reject.svg#reject-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/reject.svg#reject-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/reject.svg#reject-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/reject.svg#reject-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/reject.svg#reject-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/reject.svg#reject-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/reject.svg#reject-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/reject.svg#reject-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/reject.svg#reject-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/reject.svg#reject-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/reject.svg#reject-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="remove-alt">
        <td class="pldoc-icons-table-left-col">remove-alt</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/remove-alt.svg#remove-alt-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/remove-alt.svg#remove-alt-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/remove-alt.svg#remove-alt-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/remove-alt.svg#remove-alt-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/remove-alt.svg#remove-alt-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/remove-alt.svg#remove-alt-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/remove-alt.svg#remove-alt-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/remove-alt.svg#remove-alt-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/remove-alt.svg#remove-alt-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/remove-alt.svg#remove-alt-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/remove-alt.svg#remove-alt-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/remove-alt.svg#remove-alt-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="rights">
        <td class="pldoc-icons-table-left-col">rights</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/rights.svg#rights-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/rights.svg#rights-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/rights.svg#rights-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/rights.svg#rights-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/rights.svg#rights-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/rights.svg#rights-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/rights.svg#rights-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/rights.svg#rights-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/rights.svg#rights-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/rights.svg#rights-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/rights.svg#rights-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/rights.svg#rights-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="safety">
        <td class="pldoc-icons-table-left-col">safety</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/safety.svg#safety-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/safety.svg#safety-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/safety.svg#safety-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/safety.svg#safety-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/safety.svg#safety-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/safety.svg#safety-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/safety.svg#safety-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/safety.svg#safety-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/safety.svg#safety-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/safety.svg#safety-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/safety.svg#safety-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/safety.svg#safety-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="screenshot">
        <td class="pldoc-icons-table-left-col">screenshot</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/screenshot.svg#screenshot-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/screenshot.svg#screenshot-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/screenshot.svg#screenshot-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/screenshot.svg#screenshot-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/screenshot.svg#screenshot-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/screenshot.svg#screenshot-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/screenshot.svg#screenshot-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/screenshot.svg#screenshot-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/screenshot.svg#screenshot-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/screenshot.svg#screenshot-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/screenshot.svg#screenshot-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/screenshot.svg#screenshot-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="search">
        <td class="pldoc-icons-table-left-col">search</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/search.svg#search-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/search.svg#search-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/search.svg#search-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/search.svg#search-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/search.svg#search-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/search.svg#search-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/search.svg#search-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/search.svg#search-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/search.svg#search-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/search.svg#search-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/search.svg#search-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/search.svg#search-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="services">
        <td class="pldoc-icons-table-left-col">services</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/services.svg#services-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/services.svg#services-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/services.svg#services-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/services.svg#services-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/services.svg#services-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/services.svg#services-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/services.svg#services-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/services.svg#services-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/services.svg#services-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/services.svg#services-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/services.svg#services-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/services.svg#services-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="settings">
        <td class="pldoc-icons-table-left-col">settings</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/settings.svg#settings-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/settings.svg#settings-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/settings.svg#settings-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/settings.svg#settings-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/settings.svg#settings-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/settings.svg#settings-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/settings.svg#settings-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/settings.svg#settings-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/settings.svg#settings-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/settings.svg#settings-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/settings.svg#settings-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/settings.svg#settings-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="shop">
        <td class="pldoc-icons-table-left-col">shop</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/shop.svg#shop-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/shop.svg#shop-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/shop.svg#shop-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/shop.svg#shop-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/shop.svg#shop-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/shop.svg#shop-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/shop.svg#shop-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/shop.svg#shop-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/shop.svg#shop-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/shop.svg#shop-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/shop.svg#shop-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="small-company">
        <td class="pldoc-icons-table-left-col">small-company</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/small-company.svg#small-company-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/small-company.svg#small-company-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/small-company.svg#small-company-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/small-company.svg#small-company-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/small-company.svg#small-company-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/small-company.svg#small-company-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/small-company.svg#small-company-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/small-company.svg#small-company-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/small-company.svg#small-company-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/small-company.svg#small-company-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/small-company.svg#small-company-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/small-company.svg#small-company-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="star">
        <td class="pldoc-icons-table-left-col">star</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/star.svg#star-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/star.svg#star-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/star.svg#star-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/star.svg#star-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/star.svg#star-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/star.svg#star-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/star.svg#star-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/star.svg#star-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/star.svg#star-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/star.svg#star-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/star.svg#star-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/star.svg#star-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="store">
        <td class="pldoc-icons-table-left-col">store</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/store.svg#store-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/store.svg#store-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/store.svg#store-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/store.svg#store-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/store.svg#store-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/store.svg#store-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/store.svg#store-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/store.svg#store-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/store.svg#store-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/store.svg#store-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/store.svg#store-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/store.svg#store-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="synchronize">
        <td class="pldoc-icons-table-left-col">synchronize</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/synchronize.svg#synchronize-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/synchronize.svg#synchronize-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/synchronize.svg#synchronize-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/synchronize.svg#synchronize-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/synchronize.svg#synchronize-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/synchronize.svg#synchronize-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/synchronize.svg#synchronize-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/synchronize.svg#synchronize-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/synchronize.svg#synchronize-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/synchronize.svg#synchronize-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/synchronize.svg#synchronize-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/synchronize.svg#synchronize-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="tax">
        <td class="pldoc-icons-table-left-col">tax</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/tax.svg#tax-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/tax.svg#tax-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/tax.svg#tax-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/tax.svg#tax-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/tax.svg#tax-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/tax.svg#tax-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/tax.svg#tax-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/tax.svg#tax-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/tax.svg#tax-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/tax.svg#tax-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/tax.svg#tax-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/tax.svg#tax-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="transaction-ATM_withdrawal">
        <td class="pldoc-icons-table-left-col">transaction-ATM_withdrawal</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="transaction-direct-outgoing">
        <td class="pldoc-icons-table-left-col">transaction-direct-outgoing</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/transaction-direct-outgoing.svg#transaction-direct-outgoing-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/transaction-direct-outgoing.svg#transaction-direct-outgoing-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/transaction-direct-outgoing.svg#transaction-direct-outgoing-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/transaction-direct-outgoing.svg#transaction-direct-outgoing-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/transaction-direct-outgoing.svg#transaction-direct-outgoing-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/transaction-direct-outgoing.svg#transaction-direct-outgoing-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/transaction-direct-outgoing.svg#transaction-direct-outgoing-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/transaction-direct-outgoing.svg#transaction-direct-outgoing-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/transaction-direct-outgoing.svg#transaction-direct-outgoing-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/transaction-direct-outgoing.svg#transaction-direct-outgoing-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/transaction-direct-outgoing.svg#transaction-direct-outgoing-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/transaction-direct-outgoing.svg#transaction-direct-outgoing-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="transaction-incoming">
        <td class="pldoc-icons-table-left-col">transaction-incoming</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/transaction-incoming.svg#transaction-incoming-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/transaction-incoming.svg#transaction-incoming-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/transaction-incoming.svg#transaction-incoming-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/transaction-incoming.svg#transaction-incoming-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/transaction-incoming.svg#transaction-incoming-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/transaction-incoming.svg#transaction-incoming-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/transaction-incoming.svg#transaction-incoming-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/transaction-incoming.svg#transaction-incoming-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/transaction-incoming.svg#transaction-incoming-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/transaction-incoming.svg#transaction-incoming-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/transaction-incoming.svg#transaction-incoming-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/transaction-incoming.svg#transaction-incoming-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="transaction-outgoing">
        <td class="pldoc-icons-table-left-col">transaction-outgoing</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/transaction-outgoing.svg#transaction-outgoing-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/transaction-outgoing.svg#transaction-outgoing-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/transaction-outgoing.svg#transaction-outgoing-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/transaction-outgoing.svg#transaction-outgoing-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/transaction-outgoing.svg#transaction-outgoing-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/transaction-outgoing.svg#transaction-outgoing-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/transaction-outgoing.svg#transaction-outgoing-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/transaction-outgoing.svg#transaction-outgoing-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/transaction-outgoing.svg#transaction-outgoing-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/transaction-outgoing.svg#transaction-outgoing-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/transaction-outgoing.svg#transaction-outgoing-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/transaction-outgoing.svg#transaction-outgoing-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="transfer">
        <td class="pldoc-icons-table-left-col">transfer</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/transfer.svg#transfer-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/transfer.svg#transfer-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/transfer.svg#transfer-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/transfer.svg#transfer-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/transfer.svg#transfer-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/transfer.svg#transfer-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/transfer.svg#transfer-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/transfer.svg#transfer-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/transfer.svg#transfer-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/transfer.svg#transfer-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/transfer.svg#transfer-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/transfer.svg#transfer-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="user-group">
        <td class="pldoc-icons-table-left-col">user-group</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/user-group.svg#user-group-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/user-group.svg#user-group-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/user-group.svg#user-group-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/user-group.svg#user-group-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/user-group.svg#user-group-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/user-group.svg#user-group-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/user-group.svg#user-group-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/user-group.svg#user-group-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/user-group.svg#user-group-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/user-group.svg#user-group-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/user-group.svg#user-group-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/user-group.svg#user-group-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="user-id">
        <td class="pldoc-icons-table-left-col">user-id</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/user-id.svg#user-id-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/user-id.svg#user-id-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/user-id.svg#user-id-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/user-id.svg#user-id-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/user-id.svg#user-id-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/user-id.svg#user-id-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/user-id.svg#user-id-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/user-id.svg#user-id-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/user-id.svg#user-id-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/user-id.svg#user-id-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/user-id.svg#user-id-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/user-id.svg#user-id-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="user">
        <td class="pldoc-icons-table-left-col">user</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/user.svg#user-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/user.svg#user-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/user.svg#user-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/user.svg#user-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/user.svg#user-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/user.svg#user-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/user.svg#user-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/user.svg#user-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/user.svg#user-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/user.svg#user-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/user.svg#user-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/user.svg#user-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="validate">
        <td class="pldoc-icons-table-left-col">validate</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/validate.svg#validate-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/validate.svg#validate-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/validate.svg#validate-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/validate.svg#validate-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/validate.svg#validate-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/validate.svg#validate-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/validate.svg#validate-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/validate.svg#validate-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/validate.svg#validate-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/validate.svg#validate-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/validate.svg#validate-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/validate.svg#validate-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="view">
        <td class="pldoc-icons-table-left-col">view</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/view.svg#view-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/view.svg#view-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/view.svg#view-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/view.svg#view-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/view.svg#view-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/view.svg#view-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/view.svg#view-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/view.svg#view-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/view.svg#view-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/view.svg#view-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/view.svg#view-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/view.svg#view-duotone-16"></use>
          </svg>
        </td>
      </tr>
      <tr title="wallet">
        <td class="pldoc-icons-table-left-col">wallet</td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/bold/wallet.svg#wallet-bold-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-40">
            <use href="/svg/40x40/line/wallet.svg#wallet-line-40"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-40">
            <use href="/svg/40x40/duotone/wallet.svg#wallet-duotone-40"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/bold/wallet.svg#wallet-bold-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-32">
            <use href="/svg/32x32/line/wallet.svg#wallet-line-32"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-32">
            <use href="/svg/32x32/duotone/wallet.svg#wallet-duotone-32"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/bold/wallet.svg#wallet-bold-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-24">
            <use href="/svg/24x24/line/wallet.svg#wallet-line-24"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-24">
            <use href="/svg/24x24/duotone/wallet.svg#wallet-duotone-24"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/bold/wallet.svg#wallet-bold-16"></use>
          </svg>
        </td>
        <td>
          <svg class="icon-16">
            <use href="/svg/16x16/line/wallet.svg#wallet-line-16"></use>
          </svg>
        </td>
        <td class="icon-color-primary--100 color-primary--600">
          <svg class="icon-16">
            <use href="/svg/16x16/duotone/wallet.svg#wallet-duotone-16"></use>
          </svg>
        </td>
      </tr>
    </tbody>
  </table>
</div>
.flex
  .mr-20
    h3.title-3 Variations
    svg.icon-40
      use(href='/svg/40x40/line/validate-alt.svg#validate-alt-line-40')
    svg.icon-40.icon-color-primary--700
      use(href='/svg/40x40/line/validate-alt.svg#validate-alt-line-40')
    svg.icon-40.icon-color-white.border-radius-rounded.bg-color-primary--500
      use(href='/svg/40x40/line/validate-alt.svg#validate-alt-line-40')
    svg.icon-40
      use(href='/svg/40x40/bold/validate.svg#validate-bold-40')
    svg.icon-40.icon-color-warning--500
      use(href='/svg/40x40/bold/validate.svg#validate-bold-40')
  .mr-20
    h3.title-3 Rotations
    svg.icon-32
      use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')
    svg.icon-32.icon-rotate-45
      use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')
    svg.icon-32.icon-rotate-90
      use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')
    svg.icon-32.icon-rotate-135
      use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')
    svg.icon-32.icon-rotate-180
      use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')
    svg.icon-32.icon-rotate-225
      use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')
    svg.icon-32.icon-rotate-270
      use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')
    svg.icon-32.icon-rotate-315
      use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')
  .mr-20
    h3.title-3 Styles
    .flex.flex-align-center
      span Line:
      .mr-4.flex
        svg.icon-24.icon-color-grey--600
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span Bold:
      .mr-4.flex
        svg.icon-24.icon-color-grey--600
          use(href='/svg/24x24/bold/dashboard.svg#dashboard-bold-24')
      span Duotone:
      .mr-4.flex
        svg.icon-24.icon-color-primary--100.color-primary--600
          use(href='/svg/24x24/duotone/dashboard.svg#dashboard-duotone-24')
style.
  
  .pldoc-icons-table-responsive {
      overflow: auto;
      max-width: 100%;
      height: 555px;
      border: 1px solid #ccc;
    }
    .pldoc-icons-table {
      border-collapse: collapse;
      background: #fff;
      min-width: 100%;
    }
    .pldoc-icons-table thead {
      position: sticky;
      top: 0;
      z-index: 20;
    }
    .pldoc-icons-table th,
    .pldoc-icons-table td {
      text-align: center;
      overflow: hidden;
      width: 6rem;
      min-width: 6rem;
      box-shadow: inset -1px -1px 0 #ccc;
    }
    .pldoc-icons-table td {
      background: #fff;
      padding: 0.8rem 0;
    }
    .pldoc-icons-table td svg {
      outline: 1px dashed rgba(0, 0, 255, 0.2);
      vertical-align: -0.2em;
    }
    .pldoc-icons-table th {
      background: #f5f5f5;
      font-weight: 500;
      padding: 0.8rem 0;
    }
    .pldoc-icons-table .pldoc-icons-table-left-col {
      position: sticky;
      left: 0;
      z-index: 10;
      text-align: left;
      padding:  0.8rem 1.6rem;
    }
  
h3.title-3 Available icons
.pldoc-icons-table-responsive
  table.pldoc-icons-table
    thead
      tr
        th.pldoc-icons-table-left-col(rowspan='2')
        th(colspan='3') 40x40
        th(colspan='3') 32x32
        th(colspan='3') 24x24
        th(colspan='3') 16x16
      tr
        th bold
        th line
        th duotone
        th bold
        th line
        th duotone
        th bold
        th line
        th duotone
        th bold
        th line
        th duotone
    tbody
      tr(title='arrow-up')
        td.pldoc-icons-table-left-col arrow-up
        td
          svg.icon-40
            use(href='/svg/40x40/bold/arrow-up.svg#arrow-up-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/arrow-up.svg#arrow-up-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/arrow-up.svg#arrow-up-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/arrow-up.svg#arrow-up-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/arrow-up.svg#arrow-up-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/arrow-up.svg#arrow-up-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/arrow-up.svg#arrow-up-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/arrow-up.svg#arrow-up-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/arrow-up.svg#arrow-up-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/arrow-up.svg#arrow-up-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/arrow-up.svg#arrow-up-duotone-16')
      tr(title='balance')
        td.pldoc-icons-table-left-col balance
        td
          svg.icon-40
            use(href='/svg/40x40/bold/balance.svg#balance-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/balance.svg#balance-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/balance.svg#balance-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/balance.svg#balance-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/balance.svg#balance-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/balance.svg#balance-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/balance.svg#balance-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/balance.svg#balance-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/balance.svg#balance-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/balance.svg#balance-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/balance.svg#balance-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/balance.svg#balance-duotone-16')
      tr(title='bank')
        td.pldoc-icons-table-left-col bank
        td
          svg.icon-40
            use(href='/svg/40x40/bold/bank.svg#bank-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/bank.svg#bank-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/bank.svg#bank-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/bank.svg#bank-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/bank.svg#bank-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/bank.svg#bank-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/bank.svg#bank-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/bank.svg#bank-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/bank.svg#bank-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/bank.svg#bank-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/bank.svg#bank-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/bank.svg#bank-duotone-16')
      tr(title='bell')
        td.pldoc-icons-table-left-col bell
        td
          svg.icon-40
            use(href='/svg/40x40/bold/bell.svg#bell-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/bell.svg#bell-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/bell.svg#bell-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/bell.svg#bell-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/bell.svg#bell-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/bell.svg#bell-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/bell.svg#bell-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/bell.svg#bell-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/bell.svg#bell-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/bell.svg#bell-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/bell.svg#bell-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/bell.svg#bell-duotone-16')
      tr(title='briefcase')
        td.pldoc-icons-table-left-col briefcase
        td
          svg.icon-40
            use(href='/svg/40x40/bold/briefcase.svg#briefcase-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/briefcase.svg#briefcase-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/briefcase.svg#briefcase-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/briefcase.svg#briefcase-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/briefcase.svg#briefcase-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/briefcase.svg#briefcase-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/briefcase.svg#briefcase-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/briefcase.svg#briefcase-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/briefcase.svg#briefcase-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/briefcase.svg#briefcase-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/briefcase.svg#briefcase-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/briefcase.svg#briefcase-duotone-16')
      tr(title='capital')
        td.pldoc-icons-table-left-col capital
        td
          svg.icon-40
            use(href='/svg/40x40/bold/capital.svg#capital-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/capital.svg#capital-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/capital.svg#capital-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/capital.svg#capital-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/capital.svg#capital-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/capital.svg#capital-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/capital.svg#capital-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/capital.svg#capital-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/capital.svg#capital-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/capital.svg#capital-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/capital.svg#capital-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/capital.svg#capital-duotone-16')
      tr(title='car')
        td.pldoc-icons-table-left-col car
        td
          svg.icon-40
            use(href='/svg/40x40/bold/car.svg#car-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/car.svg#car-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/car.svg#car-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/car.svg#car-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/car.svg#car-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/car.svg#car-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/car.svg#car-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/car.svg#car-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/car.svg#car-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/car.svg#car-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/car.svg#car-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/car.svg#car-duotone-16')
      tr(title='category')
        td.pldoc-icons-table-left-col category
        td
          svg.icon-40
            use(href='/svg/40x40/bold/category.svg#category-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/category.svg#category-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/category.svg#category-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/category.svg#category-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/category.svg#category-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/category.svg#category-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/category.svg#category-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/category.svg#category-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/category.svg#category-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/category.svg#category-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/category.svg#category-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/category.svg#category-duotone-16')
      tr(title='chart-bar-alt')
        td.pldoc-icons-table-left-col chart-bar-alt
        td
          svg.icon-40
            use(href='/svg/40x40/bold/chart-bar-alt.svg#chart-bar-alt-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/chart-bar-alt.svg#chart-bar-alt-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/chart-bar-alt.svg#chart-bar-alt-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/chart-bar-alt.svg#chart-bar-alt-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/chart-bar-alt.svg#chart-bar-alt-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/chart-bar-alt.svg#chart-bar-alt-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/chart-bar-alt.svg#chart-bar-alt-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/chart-bar-alt.svg#chart-bar-alt-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/chart-bar-alt.svg#chart-bar-alt-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/chart-bar-alt.svg#chart-bar-alt-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/chart-bar-alt.svg#chart-bar-alt-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/chart-bar-alt.svg#chart-bar-alt-duotone-16')
      tr(title='chart-bar-variant')
        td.pldoc-icons-table-left-col chart-bar-variant
        td
          svg.icon-40
            use(href='/svg/40x40/bold/chart-bar-variant.svg#chart-bar-variant-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/chart-bar-variant.svg#chart-bar-variant-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/chart-bar-variant.svg#chart-bar-variant-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/chart-bar-variant.svg#chart-bar-variant-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/chart-bar-variant.svg#chart-bar-variant-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/chart-bar-variant.svg#chart-bar-variant-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/chart-bar-variant.svg#chart-bar-variant-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/chart-bar-variant.svg#chart-bar-variant-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/chart-bar-variant.svg#chart-bar-variant-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/chart-bar-variant.svg#chart-bar-variant-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/chart-bar-variant.svg#chart-bar-variant-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/chart-bar-variant.svg#chart-bar-variant-duotone-16')
      tr(title='chart-bar-line')
        td.pldoc-icons-table-left-col chart-bar-line
        td
          svg.icon-40
            use(href='/svg/40x40/bold/chart-bar-line.svg#chart-bar-line-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/chart-bar-line.svg#chart-bar-line-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/chart-bar-line.svg#chart-bar-line-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/chart-bar-line.svg#chart-bar-line-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/chart-bar-line.svg#chart-bar-line-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/chart-bar-line.svg#chart-bar-line-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/chart-bar-line.svg#chart-bar-line-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/chart-bar-line.svg#chart-bar-line-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/chart-bar-line.svg#chart-bar-line-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/chart-bar-line.svg#chart-bar-line-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/chart-bar-line.svg#chart-bar-line-duotone-16')
      tr(title='chart-bar')
        td.pldoc-icons-table-left-col chart-bar
        td
          svg.icon-40
            use(href='/svg/40x40/bold/chart-bar.svg#chart-bar-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/chart-bar.svg#chart-bar-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/chart-bar.svg#chart-bar-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/chart-bar.svg#chart-bar-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/chart-bar.svg#chart-bar-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/chart-bar.svg#chart-bar-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/chart-bar.svg#chart-bar-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/chart-bar.svg#chart-bar-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/chart-bar.svg#chart-bar-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/chart-bar.svg#chart-bar-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/chart-bar.svg#chart-bar-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/chart-bar.svg#chart-bar-duotone-16')
      tr(title='chart-line-alt')
        td.pldoc-icons-table-left-col chart-line-alt
        td
          svg.icon-40
            use(href='/svg/40x40/bold/chart-line-alt.svg#chart-line-alt-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/chart-line-alt.svg#chart-line-alt-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/chart-line-alt.svg#chart-line-alt-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/chart-line-alt.svg#chart-line-alt-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/chart-line-alt.svg#chart-line-alt-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/chart-line-alt.svg#chart-line-alt-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/chart-line-alt.svg#chart-line-alt-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/chart-line-alt.svg#chart-line-alt-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/chart-line-alt.svg#chart-line-alt-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/chart-line-alt.svg#chart-line-alt-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/chart-line-alt.svg#chart-line-alt-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/chart-line-alt.svg#chart-line-alt-duotone-16')
      tr(title='chart-line')
        td.pldoc-icons-table-left-col chart-line
        td
          svg.icon-40
            use(href='/svg/40x40/bold/chart-line.svg#chart-line-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/chart-line.svg#chart-line-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/chart-line.svg#chart-line-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/chart-line.svg#chart-line-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/chart-line.svg#chart-line-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/chart-line.svg#chart-line-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/chart-line.svg#chart-line-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/chart-line.svg#chart-line-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/chart-line.svg#chart-line-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/chart-line.svg#chart-line-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/chart-line.svg#chart-line-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/chart-line.svg#chart-line-duotone-16')
      tr(title='chart-pie')
        td.pldoc-icons-table-left-col chart-pie
        td
          svg.icon-40
            use(href='/svg/40x40/bold/chart-pie.svg#chart-pie-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/chart-pie.svg#chart-pie-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/chart-pie.svg#chart-pie-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/chart-pie.svg#chart-pie-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/chart-pie.svg#chart-pie-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/chart-pie.svg#chart-pie-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/chart-pie.svg#chart-pie-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/chart-pie.svg#chart-pie-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/chart-pie.svg#chart-pie-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/chart-pie.svg#chart-pie-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/chart-pie.svg#chart-pie-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/chart-pie.svg#chart-pie-duotone-16')
      tr(title='chat')
        td.pldoc-icons-table-left-col chat
        td
          svg.icon-40
            use(href='/svg/40x40/bold/chat.svg#chat-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/chat.svg#chat-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/chat.svg#chat-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/chat.svg#chat-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/chat.svg#chat-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/chat.svg#chat-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/chat.svg#chat-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/chat.svg#chat-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/chat.svg#chat-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/chat.svg#chat-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/chat.svg#chat-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/chat.svg#chat-duotone-16')
      tr(title='check-authentification')
        td.pldoc-icons-table-left-col check-authentification
        td
          svg.icon-40
            use(href='/svg/40x40/bold/check-authentification.svg#check-authentification-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/check-authentification.svg#check-authentification-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/check-authentification.svg#check-authentification-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/check-authentification.svg#check-authentification-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/check-authentification.svg#check-authentification-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/check-authentification.svg#check-authentification-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/check-authentification.svg#check-authentification-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/check-authentification.svg#check-authentification-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/check-authentification.svg#check-authentification-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/check-authentification.svg#check-authentification-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/check-authentification.svg#check-authentification-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/check-authentification.svg#check-authentification-duotone-16')
      tr(title='chevron-down')
        td.pldoc-icons-table-left-col chevron-down
        td
          svg.icon-40
            use(href='/svg/40x40/bold/chevron-down.svg#chevron-down-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/chevron-down.svg#chevron-down-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/chevron-down.svg#chevron-down-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/chevron-down.svg#chevron-down-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/chevron-down.svg#chevron-down-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/chevron-down.svg#chevron-down-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/chevron-down.svg#chevron-down-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/chevron-down.svg#chevron-down-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/chevron-down.svg#chevron-down-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/chevron-down.svg#chevron-down-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/chevron-down.svg#chevron-down-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/chevron-down.svg#chevron-down-duotone-16')
      tr(title='clock')
        td.pldoc-icons-table-left-col clock
        td
          svg.icon-40
            use(href='/svg/40x40/bold/clock.svg#clock-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/clock.svg#clock-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/clock.svg#clock-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/clock.svg#clock-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/clock.svg#clock-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/clock.svg#clock-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/clock.svg#clock-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/clock.svg#clock-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/clock.svg#clock-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/clock.svg#clock-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/clock.svg#clock-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/clock.svg#clock-duotone-16')
      tr(title='company')
        td.pldoc-icons-table-left-col company
        td
          svg.icon-40
            use(href='/svg/40x40/bold/company.svg#company-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/company.svg#company-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/company.svg#company-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/company.svg#company-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/company.svg#company-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/company.svg#company-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/company.svg#company-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/company.svg#company-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/company.svg#company-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/company.svg#company-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/company.svg#company-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/company.svg#company-duotone-16')
      tr(title='credit-card')
        td.pldoc-icons-table-left-col credit-card
        td
          svg.icon-40
            use(href='/svg/40x40/bold/credit-card.svg#credit-card-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/credit-card.svg#credit-card-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/credit-card.svg#credit-card-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/credit-card.svg#credit-card-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/credit-card.svg#credit-card-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/credit-card.svg#credit-card-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/credit-card.svg#credit-card-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/credit-card.svg#credit-card-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/credit-card.svg#credit-card-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/credit-card.svg#credit-card-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/credit-card.svg#credit-card-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/credit-card.svg#credit-card-duotone-16')
      tr(title='dashboard')
        td.pldoc-icons-table-left-col dashboard
        td
          svg.icon-40
            use(href='/svg/40x40/bold/dashboard.svg#dashboard-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/dashboard.svg#dashboard-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/dashboard.svg#dashboard-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/dashboard.svg#dashboard-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/dashboard.svg#dashboard-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/dashboard.svg#dashboard-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/dashboard.svg#dashboard-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/dashboard.svg#dashboard-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/dashboard.svg#dashboard-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/dashboard.svg#dashboard-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/dashboard.svg#dashboard-duotone-16')
      tr(title='direct-debit')
        td.pldoc-icons-table-left-col direct-debit
        td
          svg.icon-40
            use(href='/svg/40x40/bold/direct-debit.svg#direct-debit-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/direct-debit.svg#direct-debit-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/direct-debit.svg#direct-debit-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/direct-debit.svg#direct-debit-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/direct-debit.svg#direct-debit-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/direct-debit.svg#direct-debit-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/direct-debit.svg#direct-debit-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/direct-debit.svg#direct-debit-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/direct-debit.svg#direct-debit-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/direct-debit.svg#direct-debit-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/direct-debit.svg#direct-debit-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/direct-debit.svg#direct-debit-duotone-16')
      tr(title='discount')
        td.pldoc-icons-table-left-col discount
        td
          svg.icon-40
            use(href='/svg/40x40/bold/discount.svg#discount-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/discount.svg#discount-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/discount.svg#discount-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/discount.svg#discount-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/discount.svg#discount-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/discount.svg#discount-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/discount.svg#discount-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/discount.svg#discount-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/discount.svg#discount-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/discount.svg#discount-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/discount.svg#discount-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/discount.svg#discount-duotone-16')
      tr(title='euro')
        td.pldoc-icons-table-left-col euro
        td
          svg.icon-40
            use(href='/svg/40x40/bold/euro.svg#euro-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/euro.svg#euro-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/euro.svg#euro-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/euro.svg#euro-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/euro.svg#euro-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/euro.svg#euro-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/euro.svg#euro-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/euro.svg#euro-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/euro.svg#euro-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/euro.svg#euro-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/euro.svg#euro-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/euro.svg#euro-duotone-16')
      tr(title='exit')
        td.pldoc-icons-table-left-col exit
        td
          svg.icon-40
            use(href='/svg/40x40/bold/exit.svg#exit-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/exit.svg#exit-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/exit.svg#exit-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/exit.svg#exit-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/exit.svg#exit-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/exit.svg#exit-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/exit.svg#exit-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/exit.svg#exit-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/exit.svg#exit-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/exit.svg#exit-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/exit.svg#exit-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/exit.svg#exit-duotone-16')
      tr(title='expand')
        td.pldoc-icons-table-left-col expand
        td
          svg.icon-40
            use(href='/svg/40x40/bold/expand.svg#expand-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/expand.svg#expand-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/expand.svg#expand-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/expand.svg#expand-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/expand.svg#expand-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/expand.svg#expand-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/expand.svg#expand-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/expand.svg#expand-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/expand.svg#expand-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/expand.svg#expand-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/expand.svg#expand-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/expand.svg#expand-duotone-16')
      tr(title='file')
        td.pldoc-icons-table-left-col file
        td
          svg.icon-40
            use(href='/svg/40x40/bold/file.svg#file-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/file.svg#file-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/file.svg#file-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/file.svg#file-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/file.svg#file-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/file.svg#file-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/file.svg#file-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/file.svg#file-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/file.svg#file-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/file.svg#file-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/file.svg#file-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/file.svg#file-duotone-16')
      tr(title='flag-FR')
        td.pldoc-icons-table-left-col flag-FR
        td
          svg.icon-40
            use(href='/svg/40x40/bold/flag-FR.svg#flag-FR-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/flag-FR.svg#flag-FR-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/flag-FR.svg#flag-FR-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/flag-FR.svg#flag-FR-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/flag-FR.svg#flag-FR-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/flag-FR.svg#flag-FR-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/flag-FR.svg#flag-FR-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/flag-FR.svg#flag-FR-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/flag-FR.svg#flag-FR-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/flag-FR.svg#flag-FR-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/flag-FR.svg#flag-FR-duotone-16')
      tr(title='flag-BE')
        td.pldoc-icons-table-left-col flag-BE
        td
          svg.icon-40
            use(href='/svg/40x40/bold/flag-BE.svg#flag-BE-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/flag-BE.svg#flag-BE-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/flag-BE.svg#flag-BE-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/flag-BE.svg#flag-BE-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/flag-BE.svg#flag-BE-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/flag-BE.svg#flag-BE-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/flag-BE.svg#flag-BE-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/flag-BE.svg#flag-BE-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/flag-BE.svg#flag-BE-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/flag-BE.svg#flag-BE-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/flag-BE.svg#flag-BE-duotone-16')
      tr(title='flag-DE')
        td.pldoc-icons-table-left-col flag-DE
        td
          svg.icon-40
            use(href='/svg/40x40/bold/flag-DE.svg#flag-DE-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/flag-DE.svg#flag-DE-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/flag-DE.svg#flag-DE-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/flag-DE.svg#flag-DE-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/flag-DE.svg#flag-DE-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/flag-DE.svg#flag-DE-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/flag-DE.svg#flag-DE-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/flag-DE.svg#flag-DE-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/flag-DE.svg#flag-DE-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/flag-DE.svg#flag-DE-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/flag-DE.svg#flag-DE-duotone-16')
      tr(title='flag-EN')
        td.pldoc-icons-table-left-col flag-EN
        td
          svg.icon-40
            use(href='/svg/40x40/bold/flag-EN.svg#flag-EN-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/flag-EN.svg#flag-EN-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/flag-EN.svg#flag-EN-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/flag-EN.svg#flag-EN-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/flag-EN.svg#flag-EN-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/flag-EN.svg#flag-EN-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/flag-EN.svg#flag-EN-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/flag-EN.svg#flag-EN-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/flag-EN.svg#flag-EN-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/flag-EN.svg#flag-EN-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/flag-EN.svg#flag-EN-duotone-16')
      tr(title='flag-ES')
        td.pldoc-icons-table-left-col flag-ES
        td
          svg.icon-40
            use(href='/svg/40x40/bold/flag-ES.svg#flag-ES-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/flag-ES.svg#flag-ES-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/flag-ES.svg#flag-ES-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/flag-ES.svg#flag-ES-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/flag-ES.svg#flag-ES-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/flag-ES.svg#flag-ES-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/flag-ES.svg#flag-ES-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/flag-ES.svg#flag-ES-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/flag-ES.svg#flag-ES-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/flag-ES.svg#flag-ES-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/flag-ES.svg#flag-ES-duotone-16')
      tr(title='flag-IT')
        td.pldoc-icons-table-left-col flag-IT
        td
          svg.icon-40
            use(href='/svg/40x40/bold/flag-IT.svg#flag-IT-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/flag-IT.svg#flag-IT-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/flag-IT.svg#flag-IT-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/flag-IT.svg#flag-IT-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/flag-IT.svg#flag-IT-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/flag-IT.svg#flag-IT-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/flag-IT.svg#flag-IT-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/flag-IT.svg#flag-IT-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/flag-IT.svg#flag-IT-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/flag-IT.svg#flag-IT-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/flag-IT.svg#flag-IT-duotone-16')
      tr(title='flag-SU')
        td.pldoc-icons-table-left-col flag-SU
        td
          svg.icon-40
            use(href='/svg/40x40/bold/flag-SU.svg#flag-SU-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/flag-SU.svg#flag-SU-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/flag-SU.svg#flag-SU-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/flag-SU.svg#flag-SU-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/flag-SU.svg#flag-SU-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/flag-SU.svg#flag-SU-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/flag-SU.svg#flag-SU-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/flag-SU.svg#flag-SU-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/flag-SU.svg#flag-SU-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/flag-SU.svg#flag-SU-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/flag-SU.svg#flag-SU-duotone-16')
      tr(title='flag-US')
        td.pldoc-icons-table-left-col flag-US
        td
          svg.icon-40
            use(href='/svg/40x40/bold/flag-US.svg#flag-US-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/flag-US.svg#flag-US-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/flag-US.svg#flag-US-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/flag-US.svg#flag-US-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/flag-US.svg#flag-US-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/flag-US.svg#flag-US-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/flag-US.svg#flag-US-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/flag-US.svg#flag-US-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/flag-US.svg#flag-US-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/flag-US.svg#flag-US-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/flag-US.svg#flag-US-duotone-16')
      tr(title='flash')
        td.pldoc-icons-table-left-col flash
        td
          svg.icon-40
            use(href='/svg/40x40/bold/flash.svg#flash-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/flash.svg#flash-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/flash.svg#flash-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/flash.svg#flash-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/flash.svg#flash-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/flash.svg#flash-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/flash.svg#flash-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/flash.svg#flash-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/flash.svg#flash-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/flash.svg#flash-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/flash.svg#flash-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/flash.svg#flash-duotone-16')
      tr(title='folder')
        td.pldoc-icons-table-left-col folder
        td
          svg.icon-40
            use(href='/svg/40x40/bold/folder.svg#folder-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/folder.svg#folder-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/folder.svg#folder-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/folder.svg#folder-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/folder.svg#folder-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/folder.svg#folder-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/folder.svg#folder-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/folder.svg#folder-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/folder.svg#folder-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/folder.svg#folder-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/folder.svg#folder-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/folder.svg#folder-duotone-16')
      tr(title='hammer')
        td.pldoc-icons-table-left-col hammer
        td
          svg.icon-40
            use(href='/svg/40x40/bold/hammer.svg#hammer-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/hammer.svg#hammer-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/hammer.svg#hammer-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/hammer.svg#hammer-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/hammer.svg#hammer-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/hammer.svg#hammer-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/hammer.svg#hammer-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/hammer.svg#hammer-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/hammer.svg#hammer-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/hammer.svg#hammer-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/hammer.svg#hammer-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/hammer.svg#hammer-duotone-16')
      tr(title='headphone')
        td.pldoc-icons-table-left-col headphone
        td
          svg.icon-40
            use(href='/svg/40x40/bold/headphone.svg#headphone-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/headphone.svg#headphone-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/headphone.svg#headphone-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/headphone.svg#headphone-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/headphone.svg#headphone-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/headphone.svg#headphone-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/headphone.svg#headphone-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/headphone.svg#headphone-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/headphone.svg#headphone-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/headphone.svg#headphone-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/headphone.svg#headphone-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/headphone.svg#headphone-duotone-16')
      tr(title='help')
        td.pldoc-icons-table-left-col help
        td
          svg.icon-40
            use(href='/svg/40x40/bold/help.svg#help-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/help.svg#help-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/help.svg#help-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/help.svg#help-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/help.svg#help-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/help.svg#help-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/help.svg#help-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/help.svg#help-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/help.svg#help-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/help.svg#help-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/help.svg#help-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/help.svg#help-duotone-16')
      tr(title='invest')
        td.pldoc-icons-table-left-col invest
        td
          svg.icon-40
            use(href='/svg/40x40/bold/invest.svg#invest-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/invest.svg#invest-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/invest.svg#invest-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/invest.svg#invest-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/invest.svg#invest-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/invest.svg#invest-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/invest.svg#invest-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/invest.svg#invest-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/invest.svg#invest-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/invest.svg#invest-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/invest.svg#invest-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/invest.svg#invest-duotone-16')
      tr(title='invoice')
        td.pldoc-icons-table-left-col invoice
        td
          svg.icon-40
            use(href='/svg/40x40/bold/invoice.svg#invoice-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/invoice.svg#invoice-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/invoice.svg#invoice-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/invoice.svg#invoice-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/invoice.svg#invoice-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/invoice.svg#invoice-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/invoice.svg#invoice-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/invoice.svg#invoice-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/invoice.svg#invoice-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/invoice.svg#invoice-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/invoice.svg#invoice-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/invoice.svg#invoice-duotone-16')
      tr(title='loan')
        td.pldoc-icons-table-left-col loan
        td
          svg.icon-40
            use(href='/svg/40x40/bold/loan.svg#loan-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/loan.svg#loan-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/loan.svg#loan-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/loan.svg#loan-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/loan.svg#loan-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/loan.svg#loan-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/loan.svg#loan-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/loan.svg#loan-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/loan.svg#loan-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/loan.svg#loan-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/loan.svg#loan-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/loan.svg#loan-duotone-16')
      tr(title='map-pin')
        td.pldoc-icons-table-left-col map-pin
        td
          svg.icon-40
            use(href='/svg/40x40/bold/map-pin.svg#map-pin-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/map-pin.svg#map-pin-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/map-pin.svg#map-pin-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/map-pin.svg#map-pin-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/map-pin.svg#map-pin-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/map-pin.svg#map-pin-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/map-pin.svg#map-pin-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/map-pin.svg#map-pin-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/map-pin.svg#map-pin-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/map-pin.svg#map-pin-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/map-pin.svg#map-pin-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/map-pin.svg#map-pin-duotone-16')
      tr(title='more-horizontal')
        td.pldoc-icons-table-left-col more-horizontal
        td
          svg.icon-40
            use(href='/svg/40x40/bold/more-horizontal.svg#more-horizontal-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/more-horizontal.svg#more-horizontal-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/more-horizontal.svg#more-horizontal-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/more-horizontal.svg#more-horizontal-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/more-horizontal.svg#more-horizontal-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/more-horizontal.svg#more-horizontal-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/more-horizontal.svg#more-horizontal-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/more-horizontal.svg#more-horizontal-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/more-horizontal.svg#more-horizontal-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/more-horizontal.svg#more-horizontal-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/more-horizontal.svg#more-horizontal-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/more-horizontal.svg#more-horizontal-duotone-16')
      tr(title='operations')
        td.pldoc-icons-table-left-col operations
        td
          svg.icon-40
            use(href='/svg/40x40/bold/operations.svg#operations-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/operations.svg#operations-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/operations.svg#operations-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/operations.svg#operations-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/operations.svg#operations-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/operations.svg#operations-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/operations.svg#operations-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/operations.svg#operations-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/operations.svg#operations-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/operations.svg#operations-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/operations.svg#operations-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/operations.svg#operations-duotone-16')
      tr(title='performance-increase')
        td.pldoc-icons-table-left-col performance-increase
        td
          svg.icon-40
            use(href='/svg/40x40/bold/performance-increase.svg#performance-increase-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/performance-increase.svg#performance-increase-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/performance-increase.svg#performance-increase-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/performance-increase.svg#performance-increase-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/performance-increase.svg#performance-increase-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/performance-increase.svg#performance-increase-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/performance-increase.svg#performance-increase-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/performance-increase.svg#performance-increase-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/performance-increase.svg#performance-increase-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/performance-increase.svg#performance-increase-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/performance-increase.svg#performance-increase-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/performance-increase.svg#performance-increase-duotone-16')
      tr(title='prismea')
        td.pldoc-icons-table-left-col prismea
        td
          svg.icon-40
            use(href='/svg/40x40/bold/prismea.svg#prismea-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/prismea.svg#prismea-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/prismea.svg#prismea-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/prismea.svg#prismea-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/prismea.svg#prismea-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/prismea.svg#prismea-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/prismea.svg#prismea-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/prismea.svg#prismea-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/prismea.svg#prismea-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/prismea.svg#prismea-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/prismea.svg#prismea-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/prismea.svg#prismea-duotone-16')
      tr(title='refresh')
        td.pldoc-icons-table-left-col refresh
        td
          svg.icon-40
            use(href='/svg/40x40/bold/refresh.svg#refresh-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/refresh.svg#refresh-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/refresh.svg#refresh-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/refresh.svg#refresh-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/refresh.svg#refresh-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/refresh.svg#refresh-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/refresh.svg#refresh-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/refresh.svg#refresh-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/refresh.svg#refresh-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/refresh.svg#refresh-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/refresh.svg#refresh-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/refresh.svg#refresh-duotone-16')
      tr(title='reject')
        td.pldoc-icons-table-left-col reject
        td
          svg.icon-40
            use(href='/svg/40x40/bold/reject.svg#reject-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/reject.svg#reject-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/reject.svg#reject-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/reject.svg#reject-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/reject.svg#reject-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/reject.svg#reject-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/reject.svg#reject-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/reject.svg#reject-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/reject.svg#reject-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/reject.svg#reject-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/reject.svg#reject-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/reject.svg#reject-duotone-16')
      tr(title='remove-alt')
        td.pldoc-icons-table-left-col remove-alt
        td
          svg.icon-40
            use(href='/svg/40x40/bold/remove-alt.svg#remove-alt-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/remove-alt.svg#remove-alt-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/remove-alt.svg#remove-alt-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/remove-alt.svg#remove-alt-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/remove-alt.svg#remove-alt-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/remove-alt.svg#remove-alt-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/remove-alt.svg#remove-alt-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/remove-alt.svg#remove-alt-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/remove-alt.svg#remove-alt-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/remove-alt.svg#remove-alt-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/remove-alt.svg#remove-alt-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/remove-alt.svg#remove-alt-duotone-16')
      tr(title='rights')
        td.pldoc-icons-table-left-col rights
        td
          svg.icon-40
            use(href='/svg/40x40/bold/rights.svg#rights-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/rights.svg#rights-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/rights.svg#rights-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/rights.svg#rights-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/rights.svg#rights-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/rights.svg#rights-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/rights.svg#rights-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/rights.svg#rights-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/rights.svg#rights-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/rights.svg#rights-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/rights.svg#rights-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/rights.svg#rights-duotone-16')
      tr(title='safety')
        td.pldoc-icons-table-left-col safety
        td
          svg.icon-40
            use(href='/svg/40x40/bold/safety.svg#safety-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/safety.svg#safety-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/safety.svg#safety-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/safety.svg#safety-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/safety.svg#safety-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/safety.svg#safety-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/safety.svg#safety-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/safety.svg#safety-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/safety.svg#safety-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/safety.svg#safety-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/safety.svg#safety-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/safety.svg#safety-duotone-16')
      tr(title='screenshot')
        td.pldoc-icons-table-left-col screenshot
        td
          svg.icon-40
            use(href='/svg/40x40/bold/screenshot.svg#screenshot-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/screenshot.svg#screenshot-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/screenshot.svg#screenshot-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/screenshot.svg#screenshot-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/screenshot.svg#screenshot-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/screenshot.svg#screenshot-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/screenshot.svg#screenshot-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/screenshot.svg#screenshot-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/screenshot.svg#screenshot-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/screenshot.svg#screenshot-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/screenshot.svg#screenshot-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/screenshot.svg#screenshot-duotone-16')
      tr(title='search')
        td.pldoc-icons-table-left-col search
        td
          svg.icon-40
            use(href='/svg/40x40/bold/search.svg#search-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/search.svg#search-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/search.svg#search-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/search.svg#search-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/search.svg#search-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/search.svg#search-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/search.svg#search-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/search.svg#search-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/search.svg#search-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/search.svg#search-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/search.svg#search-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/search.svg#search-duotone-16')
      tr(title='services')
        td.pldoc-icons-table-left-col services
        td
          svg.icon-40
            use(href='/svg/40x40/bold/services.svg#services-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/services.svg#services-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/services.svg#services-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/services.svg#services-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/services.svg#services-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/services.svg#services-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/services.svg#services-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/services.svg#services-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/services.svg#services-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/services.svg#services-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/services.svg#services-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/services.svg#services-duotone-16')
      tr(title='settings')
        td.pldoc-icons-table-left-col settings
        td
          svg.icon-40
            use(href='/svg/40x40/bold/settings.svg#settings-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/settings.svg#settings-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/settings.svg#settings-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/settings.svg#settings-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/settings.svg#settings-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/settings.svg#settings-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/settings.svg#settings-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/settings.svg#settings-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/settings.svg#settings-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/settings.svg#settings-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/settings.svg#settings-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/settings.svg#settings-duotone-16')
      tr(title='shop')
        td.pldoc-icons-table-left-col shop
        td
          svg.icon-40
            use(href='/svg/40x40/bold/shop.svg#shop-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/shop.svg#shop-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/shop.svg#shop-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/shop.svg#shop-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/shop.svg#shop-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/shop.svg#shop-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/shop.svg#shop-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/shop.svg#shop-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/shop.svg#shop-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/shop.svg#shop-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/shop.svg#shop-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/shop.svg#shop-duotone-16')
      tr(title='small-company')
        td.pldoc-icons-table-left-col small-company
        td
          svg.icon-40
            use(href='/svg/40x40/bold/small-company.svg#small-company-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/small-company.svg#small-company-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/small-company.svg#small-company-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/small-company.svg#small-company-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/small-company.svg#small-company-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/small-company.svg#small-company-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/small-company.svg#small-company-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/small-company.svg#small-company-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/small-company.svg#small-company-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/small-company.svg#small-company-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/small-company.svg#small-company-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/small-company.svg#small-company-duotone-16')
      tr(title='star')
        td.pldoc-icons-table-left-col star
        td
          svg.icon-40
            use(href='/svg/40x40/bold/star.svg#star-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/star.svg#star-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/star.svg#star-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/star.svg#star-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/star.svg#star-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/star.svg#star-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/star.svg#star-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/star.svg#star-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/star.svg#star-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/star.svg#star-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/star.svg#star-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/star.svg#star-duotone-16')
      tr(title='store')
        td.pldoc-icons-table-left-col store
        td
          svg.icon-40
            use(href='/svg/40x40/bold/store.svg#store-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/store.svg#store-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/store.svg#store-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/store.svg#store-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/store.svg#store-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/store.svg#store-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/store.svg#store-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/store.svg#store-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/store.svg#store-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/store.svg#store-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/store.svg#store-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/store.svg#store-duotone-16')
      tr(title='synchronize')
        td.pldoc-icons-table-left-col synchronize
        td
          svg.icon-40
            use(href='/svg/40x40/bold/synchronize.svg#synchronize-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/synchronize.svg#synchronize-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/synchronize.svg#synchronize-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/synchronize.svg#synchronize-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/synchronize.svg#synchronize-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/synchronize.svg#synchronize-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/synchronize.svg#synchronize-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/synchronize.svg#synchronize-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/synchronize.svg#synchronize-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/synchronize.svg#synchronize-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/synchronize.svg#synchronize-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/synchronize.svg#synchronize-duotone-16')
      tr(title='tax')
        td.pldoc-icons-table-left-col tax
        td
          svg.icon-40
            use(href='/svg/40x40/bold/tax.svg#tax-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/tax.svg#tax-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/tax.svg#tax-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/tax.svg#tax-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/tax.svg#tax-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/tax.svg#tax-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/tax.svg#tax-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/tax.svg#tax-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/tax.svg#tax-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/tax.svg#tax-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/tax.svg#tax-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/tax.svg#tax-duotone-16')
      tr(title='transaction-ATM_withdrawal')
        td.pldoc-icons-table-left-col transaction-ATM_withdrawal
        td
          svg.icon-40
            use(href='/svg/40x40/bold/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/transaction-ATM_withdrawal.svg#transaction-ATM_withdrawal-duotone-16')
      tr(title='transaction-direct-outgoing')
        td.pldoc-icons-table-left-col transaction-direct-outgoing
        td
          svg.icon-40
            use(href='/svg/40x40/bold/transaction-direct-outgoing.svg#transaction-direct-outgoing-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/transaction-direct-outgoing.svg#transaction-direct-outgoing-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/transaction-direct-outgoing.svg#transaction-direct-outgoing-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/transaction-direct-outgoing.svg#transaction-direct-outgoing-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/transaction-direct-outgoing.svg#transaction-direct-outgoing-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/transaction-direct-outgoing.svg#transaction-direct-outgoing-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/transaction-direct-outgoing.svg#transaction-direct-outgoing-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/transaction-direct-outgoing.svg#transaction-direct-outgoing-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/transaction-direct-outgoing.svg#transaction-direct-outgoing-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/transaction-direct-outgoing.svg#transaction-direct-outgoing-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/transaction-direct-outgoing.svg#transaction-direct-outgoing-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/transaction-direct-outgoing.svg#transaction-direct-outgoing-duotone-16')
      tr(title='transaction-incoming')
        td.pldoc-icons-table-left-col transaction-incoming
        td
          svg.icon-40
            use(href='/svg/40x40/bold/transaction-incoming.svg#transaction-incoming-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/transaction-incoming.svg#transaction-incoming-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/transaction-incoming.svg#transaction-incoming-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/transaction-incoming.svg#transaction-incoming-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/transaction-incoming.svg#transaction-incoming-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/transaction-incoming.svg#transaction-incoming-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/transaction-incoming.svg#transaction-incoming-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/transaction-incoming.svg#transaction-incoming-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/transaction-incoming.svg#transaction-incoming-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/transaction-incoming.svg#transaction-incoming-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/transaction-incoming.svg#transaction-incoming-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/transaction-incoming.svg#transaction-incoming-duotone-16')
      tr(title='transaction-outgoing')
        td.pldoc-icons-table-left-col transaction-outgoing
        td
          svg.icon-40
            use(href='/svg/40x40/bold/transaction-outgoing.svg#transaction-outgoing-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/transaction-outgoing.svg#transaction-outgoing-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/transaction-outgoing.svg#transaction-outgoing-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/transaction-outgoing.svg#transaction-outgoing-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/transaction-outgoing.svg#transaction-outgoing-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/transaction-outgoing.svg#transaction-outgoing-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/transaction-outgoing.svg#transaction-outgoing-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/transaction-outgoing.svg#transaction-outgoing-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/transaction-outgoing.svg#transaction-outgoing-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/transaction-outgoing.svg#transaction-outgoing-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/transaction-outgoing.svg#transaction-outgoing-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/transaction-outgoing.svg#transaction-outgoing-duotone-16')
      tr(title='transfer')
        td.pldoc-icons-table-left-col transfer
        td
          svg.icon-40
            use(href='/svg/40x40/bold/transfer.svg#transfer-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/transfer.svg#transfer-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/transfer.svg#transfer-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/transfer.svg#transfer-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/transfer.svg#transfer-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/transfer.svg#transfer-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/transfer.svg#transfer-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/transfer.svg#transfer-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/transfer.svg#transfer-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/transfer.svg#transfer-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/transfer.svg#transfer-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/transfer.svg#transfer-duotone-16')
      tr(title='user-group')
        td.pldoc-icons-table-left-col user-group
        td
          svg.icon-40
            use(href='/svg/40x40/bold/user-group.svg#user-group-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/user-group.svg#user-group-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/user-group.svg#user-group-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/user-group.svg#user-group-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/user-group.svg#user-group-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/user-group.svg#user-group-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/user-group.svg#user-group-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/user-group.svg#user-group-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/user-group.svg#user-group-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/user-group.svg#user-group-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/user-group.svg#user-group-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/user-group.svg#user-group-duotone-16')
      tr(title='user-id')
        td.pldoc-icons-table-left-col user-id
        td
          svg.icon-40
            use(href='/svg/40x40/bold/user-id.svg#user-id-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/user-id.svg#user-id-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/user-id.svg#user-id-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/user-id.svg#user-id-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/user-id.svg#user-id-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/user-id.svg#user-id-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/user-id.svg#user-id-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/user-id.svg#user-id-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/user-id.svg#user-id-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/user-id.svg#user-id-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/user-id.svg#user-id-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/user-id.svg#user-id-duotone-16')
      tr(title='user')
        td.pldoc-icons-table-left-col user
        td
          svg.icon-40
            use(href='/svg/40x40/bold/user.svg#user-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/user.svg#user-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/user.svg#user-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/user.svg#user-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/user.svg#user-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/user.svg#user-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/user.svg#user-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/user.svg#user-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/user.svg#user-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/user.svg#user-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/user.svg#user-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/user.svg#user-duotone-16')
      tr(title='validate')
        td.pldoc-icons-table-left-col validate
        td
          svg.icon-40
            use(href='/svg/40x40/bold/validate.svg#validate-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/validate.svg#validate-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/validate.svg#validate-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/validate.svg#validate-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/validate.svg#validate-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/validate.svg#validate-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/validate.svg#validate-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/validate.svg#validate-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/validate.svg#validate-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/validate.svg#validate-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/validate.svg#validate-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/validate.svg#validate-duotone-16')
      tr(title='view')
        td.pldoc-icons-table-left-col view
        td
          svg.icon-40
            use(href='/svg/40x40/bold/view.svg#view-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/view.svg#view-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/view.svg#view-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/view.svg#view-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/view.svg#view-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/view.svg#view-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/view.svg#view-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/view.svg#view-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/view.svg#view-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/view.svg#view-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/view.svg#view-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/view.svg#view-duotone-16')
      tr(title='wallet')
        td.pldoc-icons-table-left-col wallet
        td
          svg.icon-40
            use(href='/svg/40x40/bold/wallet.svg#wallet-bold-40')
        td
          svg.icon-40
            use(href='/svg/40x40/line/wallet.svg#wallet-line-40')
        td.icon-color-primary--100.color-primary--600
          svg.icon-40
            use(href='/svg/40x40/duotone/wallet.svg#wallet-duotone-40')
        td
          svg.icon-32
            use(href='/svg/32x32/bold/wallet.svg#wallet-bold-32')
        td
          svg.icon-32
            use(href='/svg/32x32/line/wallet.svg#wallet-line-32')
        td.icon-color-primary--100.color-primary--600
          svg.icon-32
            use(href='/svg/32x32/duotone/wallet.svg#wallet-duotone-32')
        td
          svg.icon-24
            use(href='/svg/24x24/bold/wallet.svg#wallet-bold-24')
        td
          svg.icon-24
            use(href='/svg/24x24/line/wallet.svg#wallet-line-24')
        td.icon-color-primary--100.color-primary--600
          svg.icon-24
            use(href='/svg/24x24/duotone/wallet.svg#wallet-duotone-24')
        td
          svg.icon-16
            use(href='/svg/16x16/bold/wallet.svg#wallet-bold-16')
        td
          svg.icon-16
            use(href='/svg/16x16/line/wallet.svg#wallet-line-16')
        td.icon-color-primary--100.color-primary--600
          svg.icon-16
            use(href='/svg/16x16/duotone/wallet.svg#wallet-duotone-16')

Typography

Typographical elements of the design system

<div class="title-1">Title 1</div>
<div class="title-2">Title 2</div>
<div class="title-3">Title 3</div>
<div class="title-4 mb-5">Title 4</div>
<div class="text">Text</div>
<div class="text-bold">Text bold</div>
<div class="text-action">Text action</div>
<div class="text-link">Text link</div>
<div class="text-label mb-5">Text label</div>
<div class="number">1234</div>
<div class="number-bold">8070</div>
<div class="number-label">74837</div>
.title-1 Title 1
.title-2 Title 2
.title-3 Title 3
.title-4.mb-5 Title 4
.text Text
.text-bold Text bold
.text-action Text action
.text-link Text link
.text-label.mb-5 Text label
.number 1234
.number-bold 8070
.number-label 74837