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 } %>

Available icons

Icons that ship with the gem. Pass the bare name to the icon: argument on l_ui_navigation_item and l_ui_navigation_section (e.g. icon: "globe"), or reference the asset directly as layered_ui/icon_NAME.svg. A name with no matching asset raises Propshaft::MissingAssetError, so only pass a name listed here. To add your own, drop an SVG at app/assets/images/layered_ui/icon_NAME.svg in your app.

home

globe

mail

close_circle

github

discord

linkedin

x

youtube

<%= l_ui_navigation_item("Home", root_path, icon: "home") %>
<%= l_ui_navigation_item("Contact", contact_path, icon: "mail") %>

<%# Or reference the asset directly %>
<%= image_tag "layered_ui/icon_globe.svg", alt: "", class: "l-ui-icon l-ui-icon--md", 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