Icons Use icons to reinforce actions and help scanning. We use Central Icons via our UI package,

Usage

Import icons from the UI package. Click any icon below to copy its name.

import { IconSettingsGear3 } from "@rogo-technologies/ui/icons";

Central Icons

The majority of icons come from the Central Icons library. These are production-ready, consistent icons that cover most use cases.

Custom Icons

For icons not available in Central Icons, we maintain custom icons in packages/ui/src/icons/custom-icons/. Custom icons follow the same API as Central Icons.

import { IconDocumentChat } from "@rogo-technologies/ui/icons";

Creating Custom Icons

Create a new file in the custom icons folder using CustomIconBase for consistent props handling. Export it from the index file. TypeScript will error if your icon name conflicts with Central Icons.

// packages/ui/src/icons/custom-icons/IconMyIcon.tsx
import { CustomIconBase, type CustomIconBaseProps } from "./CustomIconBase";

export function IconMyIcon(props: CustomIconBaseProps) {
  return (
    <CustomIconBase {...props} viewBox="0 0 24 24" ariaLabel="my-icon">
      <path d="..." stroke="currentColor" strokeWidth="2" />
    </CustomIconBase>
  );
}

// packages/ui/src/icons/custom-icons/index.ts
export { IconMyIcon } from "./IconMyIcon";

All Icons

Browse all available icons. Use the Frequently Used tab to see recommended icons for common actions grouped by semantic usage. Most common icons are shown first in other tabs.