Как сделать кнопки в виде квадратиков и списка?
Держи лови snippet
но с SVG вариант лучшее.
Самый простой и наилучший способ - это просто добавить нужные SVG иконки в кнопки. Можно было бы конечно и бекграундами, но судя по скрину, нужно изменение цвета иконок при hover эффекте, поэтому будет лучше использовать Single Inline SVG или использовать спрайт с иконками. 

<button value="product_card_frontpage" class="grid-view">
   <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="......" />
   </svg>
</button>

<button value="product_card_full_width" class="list-view">
   <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="......" />
   </svg>
</button>

Можно и через бекграунды вставлять и менять цвет иконок, например с помощью css filter, но это на мой взгляд какое-то странное решение. Есть ещё вариант с css масками, но нужно смотреть поддержку этого свойства.

Разумеется есть и другие варианты кроме использования Inline SVG. Например использование дополнительных html тегов для создания "иконок" или реализация с помощью градиентов/теней/псевдоэлементов/etc. Однако нужно понимать, что есть "адекватные" и "правильные" решения задач, а есть "творческие" подходы, которые не всегда и не везде уместны.

И если реализовывать иконки с помощью CSS, то можно обойтись по одному span тегу + два псевдоэлемента на каждую иконку:

Иконки на CSS
<span class="icon-grid"></span>

* {
     box-sizing: border-box;
}

.icon-grid {
     position: relative;
     display: block;
     transform: scale(5);
     height: 10px;
     width: 10px;
}

.icon-grid::after,
.icon-grid::before {
     content: "";
     display: block;
     position: absolute;
     width: 10px;
     height: 4px;
     border-right: 4px solid red;
     border-left: 4px solid red;
     top: 0;
     left: 0;
}

.icon-grid::before {
     top: 6px;
}

<span class="icon-list"></span>

* {
     box-sizing: border-box;
}

.icon-list {
     transform: scale(5);
     position: relative;
}

.icon-list,
.icon-list::after,
.icon-list::before {
     display: block;
     width: 20px;
     height: 2px;
     border-radius: 3px;
     background: #3f51b5;
}
.icon-list::after,
.icon-list::before {
     content: "";
     position: absolute;
     top: -6px;
}
.icon-list::after {
     top: 6px;
}


Основной параметр размера иконок зависит от значения scale(<length>) в свойстве transform. Можно конечно сделать иконки и по другому(возможно даже лучше), но как пример сгодится.