diff --git a/src/components/icon/icon.styles.ts b/src/components/icon/icon.styles.ts
index 6b459f375..179103e8f 100644
--- a/src/components/icon/icon.styles.ts
+++ b/src/components/icon/icon.styles.ts
@@ -8,6 +8,10 @@ export default css`
     box-sizing: content-box !important;
   }
 
+  :host[fixed-width] {
+    width: 1em;
+  }
+
   svg {
     display: block;
     height: 100%;
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 8faf5dc08..f5a738bbf 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -41,6 +41,71 @@ export default class WaIcon extends WebAwesomeElement {
 
   private initialRender = false;
 
+  @state() private svg: SVGElement | HTMLTemplateResult | null = null;
+
+  /** The name of the icon to draw. Available names depend on the icon library being used. */
+  @property({ reflect: true }) name?: string;
+
+  /**
+   * The family of icons to choose from. For Font Awesome, valid options include `classic`, `sharp`, `duotone`, and
+   * `brands`. Custom icon libraries may or may not use this property.
+   */
+  @property({ reflect: true }) family: string;
+
+  /**
+   * The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
+   * the _classic_ and _sharp_ families. Custom icon libraries may or may not use this property.
+   */
+  @property({ reflect: true }) variant: string;
+
+  /** Draws the icon in a fixed-width both. */
+  @property({ attribute: 'fixed-width', type: Boolean, reflect: true }) fixedWidth: false;
+
+  /**
+   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
+   * can result in XSS attacks.
+   */
+  @property() src?: string;
+
+  /**
+   * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
+   * ignored by assistive devices.
+   */
+  @property() label = '';
+
+  /** The name of a registered custom icon library. */
+  @property({ reflect: true }) library = 'default';
+
+  connectedCallback() {
+    super.connectedCallback();
+    watchIcon(this);
+  }
+
+  firstUpdated() {
+    this.initialRender = true;
+    this.setIcon();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    unwatchIcon(this);
+  }
+
+  private getIconSource(): IconSource {
+    const library = getIconLibrary(this.library);
+    if (this.name && library) {
+      return {
+        url: library.resolver(this.name, this.family, this.variant),
+        fromLibrary: true
+      };
+    }
+
+    return {
+      url: this.src,
+      fromLibrary: false
+    };
+  }
+
   /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
   private async resolveIcon(url: string, library?: IconLibrary): Promise<SVGResult> {
     let fileData: Response;
@@ -90,68 +155,6 @@ export default class WaIcon extends WebAwesomeElement {
     }
   }
 
-  @state() private svg: SVGElement | HTMLTemplateResult | null = null;
-
-  /** The name of the icon to draw. Available names depend on the icon library being used. */
-  @property({ reflect: true }) name?: string;
-
-  /**
-   * The family of icons to choose from. For Font Awesome, valid options include `classic`, `sharp`, `duotone`, and
-   * `brands`. Custom icon libraries may or may not use this property.
-   */
-  @property({ reflect: true }) family: string;
-
-  /**
-   * The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
-   * the _classic_ and _sharp_ families. Custom icon libraries may or may not use this property.
-   */
-  @property({ reflect: true }) variant: string;
-
-  /**
-   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
-   * can result in XSS attacks.
-   */
-  @property() src?: string;
-
-  /**
-   * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
-   * ignored by assistive devices.
-   */
-  @property() label = '';
-
-  /** The name of a registered custom icon library. */
-  @property({ reflect: true }) library = 'default';
-
-  connectedCallback() {
-    super.connectedCallback();
-    watchIcon(this);
-  }
-
-  firstUpdated() {
-    this.initialRender = true;
-    this.setIcon();
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    unwatchIcon(this);
-  }
-
-  private getIconSource(): IconSource {
-    const library = getIconLibrary(this.library);
-    if (this.name && library) {
-      return {
-        url: library.resolver(this.name, this.family, this.variant),
-        fromLibrary: true
-      };
-    }
-
-    return {
-      url: this.src,
-      fromLibrary: false
-    };
-  }
-
   @watch('label')
   handleLabelChange() {
     const hasLabel = typeof this.label === 'string' && this.label.length > 0;