Icon
The Icon component displays a standalone icon with customizable options. Our library of icons is available under the Foundation's Icons page.
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 |
---|---|---|---|
|
Improves alignment for icons that are placed beside type such as in |
|
|
|
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. |
|
|
|
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. |
|
|
|
Rather than just changing the icon color with the |
|
|
|
Optionally, when an icon has a background color, present the shape inside a circle (as opposed to default square with rounded corners. |
|
|
|
Which color to use to render the icon. See Sage Colors under "Design." |
Color slider values such as "primary", "prmary-100". |
|
|
Which icon to display. See Sage Icons under "Figma Design."
Note: |
|
-- |
|
An optional accessible label to use for the icon. Otherwise, |
|
|
|
Adjusts the size of the icon. |
|
|
-
Consider providing
label
for any icon use that describes the icon. For example, the typical "+ Item" use case should likely describe "+" with thelabel
of "add" or something similar. Iflabel
is omitted, the icon will be set up witharia-hidden="true"
- 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.