Iconset - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

My Favorites

View items you've saved for later.

<div class="ts-iconset">
    <span class="ts-icon is-heart-icon"></span>
    <div class="content">
        <div class="title">My Favorites</div>
        <div class="text">View items you've saved for later.</div>
    </div>
</div>

Variations

Circular

A iconset can show its icon in a circular shape.

Promotion

Check out our latest promotions!

<div class="ts-iconset is-circular">
    <span class="ts-icon is-bullhorn-icon"></span>
    <div class="content">
        <div class="title">Promotion</div>
        <div class="text">Check out our latest promotions!</div>
    </div>
</div>

Outlined

A iconset can have its icon displayed in an outlined style.

Coupons

Browse the coupons we offer.

Refund

See our unconditional return policy.

<div class="ts-iconset is-outlined">
    <span class="ts-icon is-ticket-simple-icon"></span>
    <div class="content">
        <div class="title">Coupons</div>
        <div class="text">Browse the coupons we offer.</div>
    </div>
</div>
<div class="ts-iconset is-outlined is-circular">
    <span class="ts-icon is-truck-icon"></span>
    <div class="content">
        <div class="title">Refund</div>
        <div class="text">See our unconditional return policy.</div>
    </div>
</div>

Looking for similar components?

Icon