Icon

Text #

Use the icon-text class around the svg icon to make it the same size as the text.

<p>
    Lorem ipsum
    <span class="icon-text"><svg ...></span>
    dolor sit amet
</p>
<p class="text-huge">
    Lorem ipsum
    <span class="icon-text"><svg ...></span>
    dolor sit amet
</p>

Size #

By default, Superkube has several icon sizes, which are set in $scales.

// =Scales
$scales: (
    icon: (
        12: 12px,
        14: 14px,
        16: 16px,
        20: 20px,
        24: 24px,
        32: 32px,
        48: 48px,
        64: 64px
    )
);

Use the icon class and icon-{size} with a suffix to specify the icon size.

<span class="icon icon-12"><svg ...></span>
<span class="icon icon-24"><svg ...></span>
<span class="icon icon-64"><svg ...></span>

You can add your own icon size by extending $scales. See also how to work with scales for modules.

// =Scales
$scales: map-extend($scales, (
    icon: (
        128: 128px
    )
));

Superkube will automatically create a new size class with the specified value.

<span class="icon icon-128"><svg ...></span>

Responsive #

Use the suffix -sm to change the icon size on small screens.

<span class="icon icon-64 icon-20-sm"><svg ...></span>

In the example above, the 64px icon would become 20px on small screens.

Color #

By default, icons have several classes for specifying color.

<span class="icon icon-64 icon-dark"><svg ...></span>
<span class="icon icon-64 icon-primary"><svg ...></span>
<span class="icon icon-64 icon-light"><svg ...></span>

You can add your own color by extending $colors. See also how to work with colors for modules.

// =Colors
$colors: map-extend($colors, (
    icon: (
        important: palette(negative, base)
    )
));

Superkube will automatically create the icon-important class with the new icon color.

<span class="icon icon-64 icon-important"><svg ...></span>

Box #

Use the icon-box-{size} modifier around the icon to put it in a box with a background. Where {size} corresponds to the icon size scale.

<span class="bg-aluminum icon-box-32 r-circle">
    <svg ...>
</span>
<span class="bg-dark icon-light icon-box-32 r-circle">
    <svg ...>
</span>