---
title: Icons
page-header: Icons
menu: icons
---

{% assign icons-brand = '' | split: ',' %}
{% assign icons-filled = '' | split: ',' %}
{% assign icons-core = '' | split: ',' %}

{% for icon in site.data.icons %}
{% assign i = icon[0] %}
{% if i contains 'brand-' %}
{% assign icons-brand = icons-brand | push: i %}
{% elsif i contains '-filled' %}
{% assign icons-filled = icons-filled | push: i %}
{% else %}
{% assign icons-core = icons-core | push: i %}
{% endif %}
{% endfor %}


<div class="row row-cards">
	<div class="col-12">
		{% include cards/icons-banner.html %}
	</div>
	<div class="col-12">
		{% include cards/icons.html title="Interface icons" icons=icons-core %}
	</div>
	<div class="col-12">
		{% include cards/icons.html title="Brand icons" icons=icons-brand %}
	</div>
	<div class="col-12">
		{% include cards/icons.html title="Filled icons" icons=icons-filled %}
	</div>
</div>