Icon

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

  • Icon font:
1<i class="bi bi-0-circle"></i>
  • HTML:
1  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-0-circle" viewBox="0 0 16 16">
2    <path d="M7.988 12.158c-1.851 0-2.941-1.57-2.941-3.99V7.84c0-2.408 1.101-3.996 2.965-3.996 1.857 0 2.935 1.57 2.935 3.996v.328c0 2.408-1.101 3.99-2.959 3.99ZM8 4.951c-1.008 0-1. 629 1. 09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895Z" />
3    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Z" />
4  </svg>

PUIK

PUIK uses the Material Icons font, rounded. The icon list can be found here.

Basic Use 

1<span class="puik-icon material-icons-round" style="font-size: 20px;">${icon_name}</span>
info
Any tag can be used as root element.

Example 

1<span class="puik-icon material-icons-round" style="font-size: 20px;">check</span>
2<div class="puik-icon material-icons-round" style="font-size: 20px;">close</div>

Color

The icon color can be changed by adding the corresponding CSS style to the root element:

1<span class="puik-icon material-icons-round" style="font-size: 20px; color: ${color};">check</span>

Example 

1<span class="puik-icon material-icons-round" style="font-size: 20px; color: green;">check</span>
2<span class="puik-icon material-icons-round" style="font-size: 20px; color: rgb(90, 100, 255);">check</span>
3<span class="puik-icon material-icons-round" style="font-size: 20px; color: #1D1B1B;">check</span>

Size

The icon size can be changed by adding the corresponding CSS style to the root input:

1<span class="puik-icon material-icons-round" style="font-size: ${size};">check</span>

Example 

1<span class="puik-icon material-icons-round" style="font-size: 20px;">check</span>
2<span class="puik-icon material-icons-round" style="font-size: 22px;">check</span>
3<span class="puik-icon material-icons-round" style="font-size: 24px;">check</span>
← Checkbox
Input →