Misc icons

FeaturedIcon wraps any line icon in a themed container: five themes by five semantic colors, shown here at size xl, with the full sm-through-xl scale below. The outline theme comes from its own Figma sheet; the four filled themes share the main Featured icon frame. One DrumKit edit (2026-08-22, human-directed): in forced colors the modern theme’s ring-1 is a box-shadow, which the mode drops, and the light theme’s filled circle is a background-color, which it flattens to Canvas, so neither had an edge. The modern square’s lost ring was measured 2026-08-22 in Chromium’s forced-colors emulation against a production build of the alerts page; the light circle’s loss, and the fix, are stated from source. Both themes now carry forced-colors:outline-1 (inset with -outline-offset-1 on modern, where the ring sits); gradient and dark needed nothing, and nothing changes outside that media variant. The same directory ships Dot (dot-icon.tsx), the status circle that badges, tags, button groups, activity feeds, the project-details slideout, and the select page’s dot-leading form all use; it has no gallery here. One DrumKit edit (2026-08-22, human-directed): the solid dot drew its circle with a 1px currentColor stroke over its fill, so at md it painted 9px in its 10px box, while the Figma _Dot is a solid circle with no stroke, 8px at md, read on the activity-feed sheet’s unseen dot (node I1254:127599;1046:10692). The stroke is removed on the solid variant, so sm, md, and lg now paint 5, 8, and 10px in their 8, 10, and 12px boxes; the outline variant keeps its wide stroke, which is its design. This edit changes normal rendering: every solid dot is 1px smaller in diameter. The sheet value was read from Figma; the before and after diameters are stated from the file’s geometry, not measured in a browser.

FileIcon from @untitledui/file-icons renders a mark for any supported file type or MIME type. Every supported type is shown in all three variants: default (colored), gray, and solid. Used in file uploads, attachment lists, and document tables.

FolderIcon draws the brand and gray folder illustrations used in file-management screens. The Figma sheet’s noise and transparent types bake in raster textures, so they ship as static assets under public/icons/folder rather than vector component variants.

The pricing sections' check mark, shipped inside CheckItemText: contained (tinted circle), filled (solid circle), and outlined (the CheckCircle line icon), in primary, gray, and success at size lg, the largest step on both the Figma sheet and the component. All four Figma sizes ship in the kit; the scale below shows the contained style at xs through lg.

CheckItemText pairs the check icon with a feature line: the list row every pricing tier card is built from. Every style and color at sizes sm, md, and lg; the kit also has an xl step, and the Figma sheet’s desktop/mobile breakpoints are the component’s own responsive classes.

StarIcon fills from 0 to 100% in ten-point steps: the primitive behind RatingStars. The Figma sheet shows yellow and gray; in code the color is whatever text utility the parent sets. Shown here at size-8, above the 20px default.

RatingBadge wraps stars, title, and subtitle in laurel wreaths for testimonial and hero sections; the light theme is made for brand-colored backgrounds. RatingStars, the 0–5 star primitive it builds on, stays in the kit.

Every platform in both Figma styles. The full-color marks are the sheet’s own vectors, vendored under public/icons/social. The handful drawn in pure black invert in dark mode, standing in for those brands' white variants; the grayscale marks are the kit’s components, which inherit currentColor and recolor with semantic text utilities in footers, share rows, and social sign-in.

Product and tool logos for integration directories, in both Figma styles. The full-color marks are each component’s default rendering: brands whose marks are black draw them on the fg-primary token, so they flip to their white variants in dark mode; the grayscale style is its grayscale prop, which swaps the brand colors for the theme-aware fg-quaternary token.

Full-color card, wallet, and bank marks with their plate and border baked in (white for all but Cash App Pay, whose official badge is the brand’s green glyph on black), ready for checkout forms and payment-method pickers. Shown at the Figma sheet’s md size (32px tall); the kit ships one SVG on the sm canvas that scales to either step.

Third-party app logos from the Figma sheet, vendored as static SVGs under public/icons/apps and grouped by the sheet’s own categories: the kit has no component for these; reference them by URL in integration directories and mockups. The sheet draws every icon on a white tile; the tiles are stripped from the vendored files so the marks sit directly on the page, and the near-black marks invert in dark mode.

The full flag set from the Untitled UI CDN, one SVG per code and shape: the Figma sheet’s rectangle, square, and circle variants each live in their own CDN path, and the shape control swaps the whole grid between them (the kit’s country selects load the bare path, which serves the circle). Three Figma-only flags have no CDN asset and are omitted; the full list is in flag-list.ts.