Skip to content

Icon

Table of Contents

  1. Specifications
    1. Properties
    2. Styling
      1. Colors
  2. Changelog
  3. Related
    1. Contained In
  4. Examples

Specifications

Properties

PropertyTypeDescriptionRequiredDefault

Styling

Colors

NameApplicationCustom PropertyRolesDefault OpacityDescription
color--tux-comp-icon--colorsecondary--
aux-color--tux-comp-icon--aux-coloron-secondary--

Changelog

1.28.0 (2022-01-21)

  • fix: adjust specificity of outline modifier (bd46826)
  • fix: standardize size scale, add xl (0332d81)
  • fix: use correct outline modifier class (d9af911)

1.26.0 (2021-10-22)

  • fix: support custom color properties in outline variation (6b4a94c)

1.12.0 (2020-10-21)

  • feat: add outline variation to circle (039c875)

1.0.0

  • icon added

Contained In

Other components that use this component (not including freeform content slots).

Examples

Icon Sizes

Default: 1em

Small: 1.5rem

Medium: 3rem

Large: 4rem

Extra Large: 10rem

1:1 Width

<div class="tux-l-auto-grid">
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( 'solid/dryer' ) }}
		</div>
		<p class="tux-d-preview__caption">Default: <code>1em</code></p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( 'solid/dryer', 'tux-c-icon--sm' ) }}
		</div>
		<p class="tux-d-preview__caption">Small: <code>1.5rem</code></p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( 'solid/dryer', 'tux-c-icon--md' ) }}
		</div>
		<p class="tux-d-preview__caption">Medium: <code>3rem</code></p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( 'solid/dryer', 'tux-c-icon--lg' ) }}
		</div>
		<p class="tux-d-preview__caption">Large: <code>4rem</code></p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( 'solid/dryer', 'tux-c-icon--xl' ) }}
		</div>
		<p class="tux-d-preview__caption">Extra Large: <code>10rem</code></p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( 'solid/dryer', 'tux-c-icon--w1' ) }}
		</div>
		<p class="tux-d-preview__caption">1:1 Width</p>
	</div>
</div>

Icon Styles

Font Awesome provides a range of styles akin to the different weights of a traditional font.

Light

Regular

Solid

Duotone

{% set icon = 'bells' %}

<div class="tux-l-auto-grid">
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( 'light/' ~ icon, 'tux-c-icon--md' ) }}
		</div>
		<p class="tux-d-preview__caption">Light</p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( 'regular/' ~ icon, 'tux-c-icon--md' ) }}
		</div>
		<p class="tux-d-preview__caption">Regular</p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( 'solid/' ~ icon, 'tux-c-icon--md' ) }}
		</div>
		<p class="tux-d-preview__caption">Solid</p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( 'duotone/' ~ icon, 'tux-c-icon--md' ) }}
		</div>
		<p class="tux-d-preview__caption">Duotone</p>
	</div>
</div>

Icon Variations

Small Circle

Medium Circle

Large Circle

Extra Large Circle

Small Outline Circle

Medium Outline Circle

Large Outline Circle

Extra Large Outline Circle

{% set weight = 'regular' %}
{% set icon = 'waveform' %}

<div class="tux-l-auto-grid">
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( weight ~ '/' ~ icon, 'tux-c-icon--sm tux-c-icon--circle' ) }}
		</div>
		<p class="tux-d-preview__caption">Small Circle</p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( weight ~ '/' ~ icon, 'tux-c-icon--md tux-c-icon--circle' ) }}
		</div>
		<p class="tux-d-preview__caption">Medium Circle</p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( weight ~ '/' ~ icon, 'tux-c-icon--lg tux-c-icon--circle' ) }}
		</div>
		<p class="tux-d-preview__caption">Large Circle</p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( weight ~ '/' ~ icon, 'tux-c-icon--xl tux-c-icon--circle' ) }}
		</div>
		<p class="tux-d-preview__caption">Extra Large Circle</p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( weight ~ '/' ~ icon, 'tux-c-icon--sm tux-c-icon--circle tux-c-icon--outline' ) }}
		</div>
		<p class="tux-d-preview__caption">Small Outline Circle</p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( weight ~ '/' ~ icon, 'tux-c-icon--md tux-c-icon--circle tux-c-icon--outline' ) }}
		</div>
		<p class="tux-d-preview__caption">Medium Outline Circle</p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( weight ~ '/' ~ icon, 'tux-c-icon--lg tux-c-icon--circle tux-c-icon--outline' ) }}
		</div>
		<p class="tux-d-preview__caption">Large Outline Circle</p>
	</div>
	<div class="tux-d-preview">
		<div class="tux-d-preview__frame">
			{{ fa_icon( weight ~ '/' ~ icon, 'tux-c-icon--xl tux-c-icon--circle tux-c-icon--outline' ) }}
		</div>
		<p class="tux-d-preview__caption">Extra Large Outline Circle</p>
	</div>
</div>