Foundations

Icons

The @grida/react-icons surface, gridded by semantic group. 42 components are now imported from the package (the root for core glyphs, /logos for brand marks); the stroke-decoration set below is the remaining editor-internal holdout.

Are you looking for icons.grida.co?

Grida Icons is our aggregated catalog of popular open-source icon sets (Lucide, Heroicons, Phosphor, Octicons, Radix UI, SVGL) with a free search API — that's a separate project. This page documents @grida/react-icons: the hand-authored React components for Grida's own editor-domain glyphs and brand logos.


Brand

The Grida mark. Promoted to @grida/react-icons/logos — theme-free (currentColor); the editor's grida-logo.tsx adapter re-applies fill-foreground.

GridaLogo


Logos

Brand / company logos. Promoted to @grida/react-icons/logos — import via the explicit subpath: import { AppleLogo } from "@grida/react-icons/logos".

ACMELogo

AnthropicLogo

AppleLogo

BirdLogo

BlackForestLabsLogo

GoogleLogo

KakaoTalkLogo

LeviLogo

LinuxLogo

NpmLogo

OpenAILogo

PostgreSQLLogo

SalesforceLogo

SlackLogo

StripeBadgeLogo

StripeWordmarkLogo

SupabaseLogo

TossLogo

UnsplashLogo

WhatsAppLogo

WindowsLogo

XLogo

YouTubeLogo


Media

Player transport glyphs. Promoted to @grida/react-icons (root).

PlayFilledIcon

PauseFilledRoundedIcon


Filter effects

Layer / backdrop effect glyphs (fe-*). Promoted to @grida/react-icons (root).

FeNoiseIcon

FeBackdropBlurIcon

FeLayerBlurIcon

FeGlassIcon


Paint

Paint & gradient-type swatches — shape only (currentColor; the editor wraps them to add the border, theme, and active state). Sweep approximates the SVG-less conic with a 24-wedge stepped pie. Shown here in the muted tone (the package ships them as agnostic currentColor shapes).

SolidPaintIcon

LinearGradientPaintIcon

RadialGradientPaintIcon

SweepGradientPaintIcon

DiamondGradientPaintIcon

ImagePaintIcon


Blend

Compositing / blend-mode glyph — shape only (the outline; the editor's active-fill highlight is a host wrapper). Promoted to @grida/react-icons (root).

BlendModeIcon


Image

AI image-operation glyphs (remove background, upscale). Promoted to @grida/react-icons (root).

RemoveBackgroundIcon

UpscaleIcon


Vector editing

Tangent-mirroring modes for bezier anchor handles. Promoted to @grida/react-icons (root).

MirroringAllIcon

MirroringAngleIcon

MirroringNoneIcon


Stroke decoration

Marker / endpoint primitives — not yet promoted (couples @grida/cg + flex composites). The composite renderers require a `value` preset and are omitted here.

StrokeDecorationNoneIcon

scaffolds/sidecontrol/controls/icons/stroke-decoration-icons.tsx

StrokeDecorationArrowLinesIcon

scaffolds/sidecontrol/controls/icons/stroke-decoration-icons.tsx

StrokeDecorationTriangleFilledIcon

scaffolds/sidecontrol/controls/icons/stroke-decoration-icons.tsx

StrokeDecorationCircleFilledIcon

scaffolds/sidecontrol/controls/icons/stroke-decoration-icons.tsx

StrokeDecorationSquareFilledIcon

scaffolds/sidecontrol/controls/icons/stroke-decoration-icons.tsx

StrokeDecorationDiamondFilledIcon

scaffolds/sidecontrol/controls/icons/stroke-decoration-icons.tsx

StrokeDecorationVerticalBarFilledIcon

scaffolds/sidecontrol/controls/icons/stroke-decoration-icons.tsx