Unkey
DocsContributingCompanyArchitectureInfrastructureRFCsDesignGitHub

Icons

Available icons for Unkey's apps.

PropTypeDefault
className
string | undefined
-

Customize

As a rule of thumb, you should only customize the color, but there's always an edge case.

Icons

These are all the icons available to import.

import { IconName } from "@unkey/icons";
<AdjustContrast3/>
<ArrowDotAntiClockwise/>
<ArrowUpRight/>
<Ban/>
<BarsFilter/>
<Bolt/>
<Book2/>
<BookBookmark/>
<Bookmark/>
<BracketsCurly/>
<Bucket/>
<Calendar/>
<CalendarEvent/>
<CaretDown/>
<CaretExpandY/>
<CaretRight/>
<CaretRightOutline/>
<CaretUp/>
<ChartActivity2/>
<ChartBarAxisY/>
<ChartUsage/>
<Chats/>
<Check/>
<ChevronDown/>
<ChevronExpandY/>
<ChevronLeft/>
<ChevronRight/>
<ChevronUp/>
<CircleCaretRight/>
<CircleCheck/>
<CircleHalfDottedClock/>
<CircleInfo/>
<CircleInfoSparkle/>
<CircleQuestion/>
<Clipboard/>
<ClipboardCheck/>
<Clock/>
<ClockRotateClockwise/>
<Clone/>
<Conversion/>
<Dots/>
<Fingerprint/>
<Focus/>
<FolderCloud/>
<Gauge/>
<Gear/>
<Grid/>
<InputPasswordEdit/>
<InputPasswordSettings/>
<InputSearch/>
<Key/>
<Laptop2/>
<Layers2/>
<Layers3/>
<Link4/>
<Lock/>
<Magnifier/>
<MoonStars/>
<Nodes/>
<NumberInput/>
<PenWriting3/>
<Plus/>
<ProgressBar/>
<Pulse/>
<Refresh3/>
<Shield/>
<ShieldAlert/>
<ShieldCheck/>
<ShieldKey/>
<SidebarLeftHide/>
<SidebarLeftShow/>
<Sliders/>
<Sparkle3/>
<Storage/>
<Sun/>
<TaskChecked/>
<TaskUnchecked/>
<TextInput/>
<TimeClock/>
<Trash/>
<TriangleWarning/>
<TriangleWarning2/>
<Ufo/>
<UserSearch/>
<XMark/>

Adding new icons

Importing icons is a manual process.

Open the icon in the Nucleo UI Essential collection and select the icon(s) you want to export.

Export it as jsx, and remove the title. Nucleo Export Settings

Update the code to match our guidelines.

Rename the file to .tsx

Add the following license block at the start of the file:

/**
* Copyright © Nucleo
* Version 1.3, January 3, 2024
* Nucleo Icons
* https://nucleoapp.com/
* - Redistribution of icons is prohibited.
* - Icons are restricted for use only within the product they are bundled with.
*
* For more details:
* https://nucleoapp.com/license
*/

Replace the function syntax with: export const INSERT_ICON_NAME: React.FC<IconProps> = (props) => {

Remove the default export

Update all color references to currentColor

Add {...props} to the root svg element.

Export it in the /internal/icons/src/index.ts barrel file.

Import and add it in in this file under #icons in alphabetic order.

Previous

Colors

Next

Button

On this page