Icon

The Icon component displays a standalone icon with customizable options. Our library of icons is available under the Foundation's Icons page.


React Component

Basic Usage

Colors

  • primary
  • sage
  • yellow
  • red
  • orange
  • purple
  • charcoal
  • grey
  • white
  • black

Sizes

  • xs
  • sm
  • Default (md)
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl

Alignment next to Type

Since a common use is to place an icon inline next to text in a variety of forms, we provide the opportunity to indicate that an icon is beside content a particular type spec. The effect is that the icon's height and line-height are updated to match the spec responsively. This can be used in combination with the different icon sizes. and also be used with a vareity of layout techniques or components such as CSS flexbox (used below) or grid templates within SageCardRow or SagePanelRow.

Heading 2 Lorem ipsum dolor sit

Heading 4 Lorem ipsum dolor sit

Body Lorem ipsum dolor sit

Body Small Lorem ipsum dolor sit

Background Colors

  • danger

  • draft

  • info

  • locked

  • published

  • warning

  • kajabi

Background Sizes

  • xs

  • sm

  • Default (md)

  • lg

  • xl

  • 2xl

  • 3xl

  • 4xl

Custom Background Sizes

Sage Component

SageIcon
<h3>Basic Usage</h3>
<%= sage_component SageIcon, { icon: "pen", label: "Edit" } %>

<h3>Colors</h3>
<%= sage_component SageCardList, {} do %>
  <% SageTokens::COLORS.each do | color | %>
    <%= sage_component SageCardListItem, { grid_template: "et" } do %>
      <%= sage_component SageIcon, { icon: "pen", color: color } %>
      <%= color %>
    <% end %>
  <% end %>
<% end %>

<h3>Sizes</h3>
<%= sage_component SageCardList, {} do %>
  <% SageTokens::ICON_SIZES.each do | size | %>
    <%= sage_component SageCardListItem, { grid_template: "et" } do %>
      <%= sage_component SageIcon, { icon: "pen", size: (size == "md" ? nil : size) } %>
      <%= size == "md" ? "Default (#{size})" : size %>
    <% end %>
  <% end %>
<% end %>

<h3>Alignment next to Type</h3>
<%= md("
Since a common use is to place an icon inline next to text in a variety of forms, we provide the opportunity to indicate that an icon is beside content a particular type spec.
The effect is that the icon's `height` and `line-height` are updated to match the spec responsively.
This can be used in combination with the different icon sizes.
and also be used with a vareity of layout techniques or components such as CSS flexbox (used below) or grid templates within `SageCardRow` or `SagePanelRow`.
") %>
<div style="display: flex;">
  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h2", spacer: { right: "xs" } } %>
  <h2 class="<%= SageClassnames::TYPE::HEADING_2 %>">Heading 2 Lorem ipsum dolor sit</h2>
</div>
<div style="display: flex;">
  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h4", spacer: { right: "xs" } } %>
  <h4 class="<%= SageClassnames::TYPE::HEADING_4 %>">Heading 4 Lorem ipsum dolor sit</h4>
</div>
<div style="display: flex;">
  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "body", spacer: { right: "xs" } } %>
  <p class="<%= SageClassnames::TYPE::BODY %>">Body Lorem ipsum dolor sit</p>
</div>
<div style="display: flex;">
  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "body-sm", spacer: { right: "xs" } } %>
  <p class="<%= SageClassnames::TYPE::BODY_SMALL %>">Body Small Lorem ipsum dolor sit</p>
</div>

<h3>Background Colors</h3>
<%= sage_component SageCardList, {} do %>
  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
    <p><%= "danger" %></p>
    <%= sage_component SageIcon, { icon: "danger", card_color: "danger" } %>
    <%= sage_component SageIcon, { icon: "danger", card_color: "danger", circular: true } %>
  <% end %>

  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
    <p><%= "draft" %></p>
    <%= sage_component SageIcon, { icon: "draft", card_color: "draft" } %>
    <%= sage_component SageIcon, { icon: "draft", card_color: "draft", circular: true } %>
  <% end %>

  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
    <p><%= "info" %></p>
    <%= sage_component SageIcon, { icon: "info-circle", card_color: "info" } %>
    <%= sage_component SageIcon, { icon: "info-circle", card_color: "info", circular: true } %>
  <% end %>

  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
    <p><%= "locked" %></p>
    <%= sage_component SageIcon, { icon: "lock", card_color: "locked" } %>
    <%= sage_component SageIcon, { icon: "lock", card_color: "locked", circular: true } %>
  <% end %>

  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
    <p><%= "published" %></p>
    <%= sage_component SageIcon, { icon: "window-paragraph", card_color: "published" } %>
    <%= sage_component SageIcon, { icon: "window-paragraph", card_color: "published", circular: true } %>
  <% end %>

  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
    <p><%= "warning" %></p>
    <%= sage_component SageIcon, { icon: "warning", card_color: "warning" } %>
    <%= sage_component SageIcon, { icon: "warning", card_color: "warning", circular: true } %>
  <% end %>

  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
    <p><%= "kajabi" %></p>
    <%= sage_component SageIcon, { icon: "kajabi-filled", card_color: "primary" } %>
    <%= sage_component SageIcon, { icon: "kajabi-filled", card_color: "primary", circular: true } %>
  <% end %>
<% end %>


<h3>Background Sizes</h3>
<%= sage_component SageCardList, {} do %>
  <% SageTokens::ICON_SIZES.each do | size | %>
    <%= sage_component SageCardListItem, { grid_template: "o" } do %>
      <p><%= size == "md" ? "Default (#{size})" : size %></p>
      <%= sage_component SageIcon, { icon: "pen", size: (size == "md" ? nil : size), card_color: "draft" } %>
      <%= sage_component SageIcon, { icon: "pen", size: (size == "md" ? nil : size), card_color: "draft", circular: true, } %>
    <% end %>
  <% end %>
<% end %>

<h3>Custom Background Sizes</h3>
<%= sage_component SageCardList, {} do %>
  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
    <%= sage_component SageIcon, { icon: "pen", size: "2xl", background_width: "128px", background_height: "64px", card_color: "draft" } %>
    <%= sage_component SageIcon, { icon: "pen", size: "xl", background_height: "64px", card_color: "draft", circular: true, } %>
  <% end %>
<% end %>
Property Description Type Default

adjacent_type

Improves alignment for icons that are placed beside type such as in SagePanelRow or with flexbox.

["h1", "h2", "h3", "h4", "h5", "h6", "body", "body-sm", "body-xs"]

nil

background_height

Allows a custom height for the icon background. Note: if no height is set, height will be equal to width. Additionally, height and width for circular icons will be equal.

String

nil

background_width

Allows a custom width for the icon background. Note: if no width is set, width will be equal to height. Additionally, height and width for circular icons will be equal.

String

nil

card_color

Rather than just changing the icon color with the color property, this option adds a padded background behind the icon in one of the brand status color options.

["default", "danger", "draft", "info", "locked", "published", "warning", "reached", "exceeded", "approaching"]

nil

circular

Optionally, when an icon has a background color, present the shape inside a circle (as opposed to default square with rounded corners.

Boolean

false

color

Which color to use to render the icon. See Sage Colors under "Design."

Color slider values such as "primary", "prmary-100".

nil

icon

required

Which icon to display. See Sage Icons under "Figma Design." Note: null is also available to place an empty space icon

String for desired icon.

--

label

An optional accessible label to use for the icon. Otherwise, aria-hidden is turned on.

String

nil

size

Adjusts the size of the icon.

["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"]

nil (Default is "md" size)

Do
  • Consider providing label for any icon use that describes the icon. For example, the typical "+ Item" use case should likely describe "+" with the label of "add" or something similar. If label is omitted, the icon will be set up with aria-hidden="true"

Don't
  • Vary too much with color and size without checking with Product Design. While we allow for variations they should still conform to consistency in use.