Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProDecorative SVG icons for desktop mockups, including folders, files with an extension badge, drives and rounded app tiles.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import {
AppIcon,
DriveIcon,
FileIcon,
FolderIcon,
} from "@/components/ui/mac-icons"<FolderIcon size={64} tone="blue" />
<FileIcon size={64} label="pdf" tone="red" />
<DriveIcon size={64} />
<AppIcon size={64} tone="green">
<MessageCircle />
</AppIcon>| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 64 | Size in pixels. |
tone | "blue" | "teal" | "green" | "amber" | "orange" | "red" | "purple" | "graphite" | "blue" | Color, taken from the theme's chart and destructive tokens. |
Also accepts all <svg> props.
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 64 | Size in pixels. |
tone | IconTone | "graphite" | Color of the extension badge. |
label | string | - | Extension drawn on the page, such as "pdf". Up to four characters, uppercased. |
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 64 | Size in pixels. |
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 64 | Size in pixels. |
tone | IconTone | "blue" | Background gradient. |
children | React.ReactNode | - | The glyph: an icon, letter or short text, drawn in white. |
Also accepts all <span> props.
All icons are aria-hidden. Put the name in visible text next to the icon.