---
layout: boostwatch
title: Boostwatch
description: See all Boosted component in one page
group: boostwatch
---

<h2 id="orange-icons">Orange Icons</h2>
<p>Icons created from the Orange brand.</p>
<p>Copyright (C) 2016 Orange SA All rights reserved</p>
<p>See NOTICE.txt for more informations</p><p>To use it in your project you need to include the file orangeIcons.css</p>
<p>The best practice is to create your own icons libray (<a href="{{ site.baseurl }}/getting-started/build-tools/#howto-create-an-icons-library-using-icomoon">See howto in getting started section</a>)</p>

<div class="doc-fonticon">
    <ul class="doc-fonticon-list">
        {% for iconClassName in site.data.orange-icons %}
        <li>
            <span class="{{ iconClassName }}" aria-hidden="true"></span>
            <span class="fonticon-class">{{ iconClassName }}</span>
        </li>
        {% endfor %}
    </ul>
</div>

{% include boostwatch/modal.html %}
{% include boostwatch/tables.html %}
{% include boostwatch/bulletPoint.html %}
{% include boostwatch/navLocal.html %}
{% include boostwatch/navTab.html %}
{% include boostwatch/accordion.html %}
{% include boostwatch/ofooter.html %}
{% include boostwatch/stepbar.html %}
{% include boostwatch/links.html %}
{% include boostwatch/navbar.html %}
{% include boostwatch/megamenu.html %}
{% include boostwatch/buttons.html %}
{% include boostwatch/switches.html %}
{% include boostwatch/typography.html %}
{% include boostwatch/forms.html %}
{% include boostwatch/navs.html %}
{% include boostwatch/pagination.html %}
{% include boostwatch/indicators.html %}
{% include boostwatch/progressbar.html %}
{% include boostwatch/containers.html %}
{% include boostwatch/dialogs.html %}
{% include boostwatch/carousel.html %}