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

Small

Medium

Large

Extra large

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/icon_page.rb

sample("Extra small", slug: "xs") do
  render NitroKit::Icon.new(:flame, id: "gallery-icon-size-xs", size: :xs)
end
sample("Small", slug: "sm") do
  render NitroKit::Icon.new(:flame, id: "gallery-icon-size-sm", size: :sm)
end
sample("Medium", slug: "md") do
  render NitroKit::Icon.new(:flame, id: "gallery-icon-size-md", size: :md)
end
sample("Large", slug: "lg") do
  render NitroKit::Icon.new(:flame, id: "gallery-icon-size-lg", size: :lg)
end
sample("Extra large", slug: "xl") do
  render NitroKit::Icon.new(:flame, id: "gallery-icon-size-xl", size: :xl)
end

Semantics

The pair renders identically; the difference is what assistive technology hears. label: makes an icon an image with an accessible name, and without it the icon stays hidden decoration beside its own text.

Meaningful and decorative

Meaningful

Decorative

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/icon_page.rb

sample("Meaningful", slug: "meaningful") do
  render NitroKit::Icon.new(
    :flame,
    id: "gallery-icon-meaningful",
    size: :lg,
    label: "Trending this week"
  )
end
sample("Decorative", slug: "decorative") do
  render NitroKit::Icon.new(:flame, id: "gallery-icon-decorative", size: :lg)
end

Stroke and glyphs

One glyph across the stroke range shows the weight decision on its own.

Interface glyphs

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/icon_page.rb

render NitroKit::Icon.new(
  :flame,
  id: "gallery-icon-stroke-thin",
  stroke_width: 1,
  label: "Thin stroke"
)
render NitroKit::Icon.new(
  :flame,
  id: "gallery-icon-stroke-default",
  stroke_width: 1.5,
  label: "Default stroke"
)
render NitroKit::Icon.new(
  :flame,
  id: "gallery-icon-stroke-bold",
  stroke_width: 2,
  label: "Bold stroke"
)

Component contract

Constructor options, rendered root, closed vocabularies, and compound boundary for this component, exactly as shipped.

docs/component_contracts.md · NitroKit::Icon

Constructor-specific options: name
size: :md, label: nil, stroke_width: 1.5, id: nil
Root and closed vocabulary: svg[data-nk=icon]; sizes xs sm md lg xl
Compound contract: Unknown Lucide names raise. stroke_width: must be a number between 0.5 and 4. Icons are decorative by default; label: produces a labelled image. Owned aria-label, aria-hidden, and role follow the ordinary merge rules, so caller ARIA that collides raises instead of being discarded.

System rules for coding agents

Instructions for coding agents, repeated on every component page so one fetched page has enough context. Humans can usually skip this section.

test/dummy/app/components/gallery/agent_rules.rb

View agent instructions

Nitro Kit 2.0 is a gem-owned, Phlex-only UI system for Rails. Render components directly: render NitroKit::Button.new("Save", variant: :primary).
Compose Nitro components inside application-owned Phlex classes. Public initializers and declared slots are the component API; private methods are not.
Public options are explicit keywords, and enumerated options are closed vocabularies. Invalid names or values raise ArgumentError; this component's accepted options are in the contract above.
Pass native attributes through their typed boundary: html: for HTML, aria: for ARIA, and data: for application data. class and style are forbidden, including inside html:.
Nitro owns NitroKit::Component::RESERVED_DATA_ATTRIBUTES: data-nk, data-slot, data-variant, data-size, data-nk-escape, data-enhanced, data-state, data-disabled, data-required, data-orientation, data-presentation, data-placement, data-layout, data-side, data-field-type, data-dir, data-gap, data-align, data-justify, data-wrap, data-cols, data-mode, data-key. Do not pass them through data:. data-action, data-controller are additive and compose with Nitro behavior.
If an integration truly requires a class, use desperately_need_a_class:. It requires a non-blank String and marks the exception with data-nk-escape="class".
Every root emits data-nk; owned parts emit component-qualified data-slot values such as field-control or card-title. Select on those attributes, never on classes.
Customize components with documented --nk-* custom properties in an application stylesheet. Variables beginning with --_nk-* are private component mechanics.
Use NitroKit::Flex and NitroKit::Grid for layout. Parents own external placement and available width; components own their intrinsic geometry.
Preserve native elements and accessibility semantics. State is exposed through native semantics and ARIA first, and through data-state when styling or behavior also needs it.