Skip to content

Icon

Table of Contents

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

Specifications

Properties

PropertyTypeDescriptionRequiredDefault

Styling

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>