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)

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.