Skip to content
Gx
GitHub

Icons

The Lucide icons that the registry components use.

  • Check
  • ChevronDown
  • ChevronLeft
  • ChevronRight
  • ChevronUp
  • Circle
  • CircleCheck
  • Ellipsis
  • Info
  • LoaderCircle
  • OctagonX
  • PanelLeft
  • TriangleAlert
  • X

Installation

Run the command in the app module.

Terminal
gx add icons

The command writes these files.

File Path in the app
Check.gx ui/icons/Check.gx
Check.fixtures.go ui/icons/Check.fixtures.go
ChevronDown.gx ui/icons/ChevronDown.gx
ChevronDown.fixtures.go ui/icons/ChevronDown.fixtures.go
ChevronLeft.gx ui/icons/ChevronLeft.gx
ChevronLeft.fixtures.go ui/icons/ChevronLeft.fixtures.go
ChevronRight.gx ui/icons/ChevronRight.gx
ChevronRight.fixtures.go ui/icons/ChevronRight.fixtures.go
ChevronUp.gx ui/icons/ChevronUp.gx
ChevronUp.fixtures.go ui/icons/ChevronUp.fixtures.go
Circle.gx ui/icons/Circle.gx
Circle.fixtures.go ui/icons/Circle.fixtures.go
CircleCheck.gx ui/icons/CircleCheck.gx
CircleCheck.fixtures.go ui/icons/CircleCheck.fixtures.go
Ellipsis.gx ui/icons/Ellipsis.gx
Ellipsis.fixtures.go ui/icons/Ellipsis.fixtures.go
Info.gx ui/icons/Info.gx
Info.fixtures.go ui/icons/Info.fixtures.go
LoaderCircle.gx ui/icons/LoaderCircle.gx
LoaderCircle.fixtures.go ui/icons/LoaderCircle.fixtures.go
OctagonX.gx ui/icons/OctagonX.gx
OctagonX.fixtures.go ui/icons/OctagonX.fixtures.go
PanelLeft.gx ui/icons/PanelLeft.gx
PanelLeft.fixtures.go ui/icons/PanelLeft.fixtures.go
TriangleAlert.gx ui/icons/TriangleAlert.gx
TriangleAlert.fixtures.go ui/icons/TriangleAlert.fixtures.go
X.gx ui/icons/X.gx
X.fixtures.go ui/icons/X.fixtures.go

Copy each file to its path in the app. Change each import of a registry package to the path of that package in the app.

ui/icons/Check.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 6L9 17l-5-5\"/>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/Check.fixtures.go
package icons

import "github.com/alternayte/gx"

var CheckFixtures = gx.Fixtures[CheckProps]{
	"Default": {Class: "size-4"},
}
ui/icons/ChevronDown.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"/>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/ChevronDown.fixtures.go
package icons

import "github.com/alternayte/gx"

var ChevronDownFixtures = gx.Fixtures[ChevronDownProps]{
	"Default": {Class: "size-4"},
}
ui/icons/ChevronLeft.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m15 18l-6-6l6-6\"/>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/ChevronLeft.fixtures.go
package icons

import "github.com/alternayte/gx"

var ChevronLeftFixtures = gx.Fixtures[ChevronLeftProps]{
	"Default": {Class: "size-4"},
}
ui/icons/ChevronRight.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"/>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/ChevronRight.fixtures.go
package icons

import "github.com/alternayte/gx"

var ChevronRightFixtures = gx.Fixtures[ChevronRightProps]{
	"Default": {Class: "size-4"},
}
ui/icons/ChevronUp.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m18 15l-6-6l-6 6\"/>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/ChevronUp.fixtures.go
package icons

import "github.com/alternayte/gx"

var ChevronUpFixtures = gx.Fixtures[ChevronUpProps]{
	"Default": {Class: "size-4"},
}
ui/icons/Circle.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"/>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/Circle.fixtures.go
package icons

import "github.com/alternayte/gx"

var CircleFixtures = gx.Fixtures[CircleProps]{
	"Default": {Class: "size-4"},
}
ui/icons/CircleCheck.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m16 9l-5.5 5.5L8 12\"/></g>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/CircleCheck.fixtures.go
package icons

import "github.com/alternayte/gx"

var CircleCheckFixtures = gx.Fixtures[CircleCheckProps]{
	"Default": {Class: "size-4"},
}
ui/icons/Ellipsis.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/><circle cx=\"5\" cy=\"12\" r=\"1\"/></g>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/Ellipsis.fixtures.go
package icons

import "github.com/alternayte/gx"

var EllipsisFixtures = gx.Fixtures[EllipsisProps]{
	"Default": {Class: "size-4"},
}
ui/icons/Info.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4m0-4h.01\"/></g>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/Info.fixtures.go
package icons

import "github.com/alternayte/gx"

var InfoFixtures = gx.Fixtures[InfoProps]{
	"Default": {Class: "size-4"},
}
ui/icons/LoaderCircle.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 12a9 9 0 1 1-6.219-8.56\"/>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/LoaderCircle.fixtures.go
package icons

import "github.com/alternayte/gx"

var LoaderCircleFixtures = gx.Fixtures[LoaderCircleProps]{
	"Default": {Class: "size-4"},
}
ui/icons/OctagonX.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m15 9l-6 6m-6.414 1.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586zM9 9l6 6\"/>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/OctagonX.fixtures.go
package icons

import "github.com/alternayte/gx"

var OctagonXFixtures = gx.Fixtures[OctagonXProps]{
	"Default": {Class: "size-4"},
}
ui/icons/PanelLeft.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M9 3v18\"/></g>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/PanelLeft.fixtures.go
package icons

import "github.com/alternayte/gx"

var PanelLeftFixtures = gx.Fixtures[PanelLeftProps]{
	"Default": {Class: "size-4"},
}
ui/icons/TriangleAlert.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01\"/>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/TriangleAlert.fixtures.go
package icons

import "github.com/alternayte/gx"

var TriangleAlertFixtures = gx.Fixtures[TriangleAlertProps]{
	"Default": {Class: "size-4"},
}
ui/icons/X.gx
package icons

props {
  // Label is the accessible name of the icon.
  // Empty hides the icon from assistive technology.
  Label string = ""
  // Class adds classes to the root element.
  Class string = ""
}

{gx.Icon("<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M18 6L6 18M6 6l12 12\"/>", gx.IconProps{Label: p.Label, Class: p.Class})}
ui/icons/X.fixtures.go
package icons

import "github.com/alternayte/gx"

var XFixtures = gx.Fixtures[XProps]{
	"Default": {Class: "size-4"},
}

Usage

The Lucide icons that the registry components use.

Each icon is an inline SVG that takes the text colour. The paths come from Lucide (ISC licence, https://lucide.dev/license).

<icons.Check class="size-4" />
<icons.X class="size-4" label="Close" />

Do and do not

Do

  • Set the size with a size-* class.
  • Set label when the icon is the only content of a control.

Don't

  • Do not add an icon to this package for one app. Run gx icons pin lucide@<version> for the full set.
  • Do not set label on a decorative icon. A decorative icon stays hidden from assistive technology.

Keyboard

Key Action
None The component is static.