Icon Block Mia

Sizes

Take a look at the icon block component for size variants

<!-- Alimentation -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceAlimentation" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-shoppingcart"></span>
</span>

<!-- Animal -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceAnimal" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-animal"></span>
</span>

<!-- Toy -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceToy" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-toys"></span>
</span>

<!-- Epargne Invest -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceEpargneInvest" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-instrument"></span>
</span>

<!-- Logement -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceLogement" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-house"></span>
</span>

<!-- Loisirs -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceLoisirs" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-vacation"></span>
</span>

<!-- Mobilite -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceMobilite" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-car"></span>
</span>

<!-- Prets -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfacePrets" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-remboursement"></span>
</span>

<!-- Restaurant -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceRestos" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-restaurant"></span>
</span>

<!-- Retraits -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceRetraits" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-sbank"></span>
</span>

<!-- Sante -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceSante" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-heart"></span>
</span>

<!-- Services -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceServices" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-service"></span>
</span>

<!-- Shopping -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceShopping" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-shoppingbag"></span>
</span>

<!-- Allocation -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceAllocation" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-allocation"></span>
</span>

<!-- Liquidation -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceLiquidation" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-pret"></span>
</span>

<!-- Loyer -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceLoyer" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-loyer"></span>
</span>

<!-- Remboursement -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceRemboursement" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-remboursement"></span>
</span>

<!-- Salaire -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceSalaire" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-salaire"></span>
</span>

<!-- Ventes -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceVentes" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-ventes"></span>
</span>

<!-- Depenses -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceDepenses" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-checkout"></span>
</span>

<!-- Entrees -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceEntrees" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-checkin"></span>
</span>

<!-- Produit Investissement -->
<span class="sds-iconBlock -iconBlockColored sds-miaSurfaceProduitInvestissement" aria-hidden="true">
    <span class="sds-iconBlock__icon sds-icon sds-icon-instrument"></span>
</span>

{% include "@icon-block-frame" %}