Icons

Icon size utilities for consistent scaling across your application.

Icon sizes

xs (16px)

sm (20px)

md (24px)

lg (28px)

xl (32px)

<%= image_tag "layered_ui/icon_home.svg", alt: "", class: "l-ui-icon l-ui-icon--xs", aria: { hidden: true } %>
<%= image_tag "layered_ui/icon_home.svg", alt: "", class: "l-ui-icon l-ui-icon--sm", aria: { hidden: true } %>
<%= image_tag "layered_ui/icon_home.svg", alt: "", class: "l-ui-icon l-ui-icon--md", aria: { hidden: true } %>
<%= image_tag "layered_ui/icon_home.svg", alt: "", class: "l-ui-icon l-ui-icon--lg", aria: { hidden: true } %>
<%= image_tag "layered_ui/icon_home.svg", alt: "", class: "l-ui-icon l-ui-icon--xl", aria: { hidden: true } %>

CSS classes

Icon CSS classes
Class	Size
`l-ui-icon l-ui-icon--xs`	16px × 16px
`l-ui-icon l-ui-icon--sm`	20px × 20px
`l-ui-icon l-ui-icon--md`	24px × 24px
`l-ui-icon l-ui-icon--lg`	28px × 28px
`l-ui-icon l-ui-icon--xl`	32px × 32px