Icon

Lucide icons with decorative and labelled semantics.

Source
app/components/nitro_kit/icon.rb
API
NitroKit::Icon.new(name, size:, label:)

Sizes

The closed size scale keeps icon geometry predictable inside controls and content.

Size scale

Extra small save icon
Small save icon
Medium save icon
Large save icon
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/icon_page.rb
Gallery::Data.icon_sizes.each do |icon|
  sample(icon.label, slug: icon.slug) do
    render NitroKit::Icon.new(
      icon.name,
      id: "gallery-icon-size-#{icon.slug}",
      size: icon.size,
      stroke_width: icon.stroke_width
    )
  end
end

Semantics

Label meaningful icons and leave icons hidden when nearby text carries the meaning.

Meaningful and decorative

Meaningful
Decorative
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/icon_page.rb
sample("Meaningful", slug: "meaningful") do
  render NitroKit::Icon.new(
    :circle_check,
    id: "gallery-icon-meaningful",
    size: :lg,
    label: "Deployment succeeded"
  )
end
sample("Decorative", slug: "decorative") do
  render NitroKit::Icon.new(:arrow_right, id: "gallery-icon-decorative", size: :lg)
end

Stroke and glyphs

A small representative set demonstrates name normalization and deliberate stroke weight.

Interface glyphs

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/icon_page.rb
render NitroKit::Icon.new(
  :save,
  id: "gallery-icon-save-thin",
  stroke_width: 1,
  label: "Save"
)
render NitroKit::Icon.new(
  :settings,
  id: "gallery-icon-settings",
  stroke_width: 1.5,
  label: "Settings"
)
render NitroKit::Icon.new(
  :triangle_alert,
  id: "gallery-icon-warning-bold",
  stroke_width: 2,
  label: "Warning"
)