Setup Config and Overrides for adding icons to Component/Drawer Item and optionally use in the outline items.

[OsamuBlack]

Attempting to close issue #1220

This pull request introduces support for custom icons in the component drawer and outline, allowing each component to specify its own icon via the icon field in its config. Documentation has been updated to reflect these changes, and several demo components now include custom icons. Additionally, new UI override options for the drawer container and items have been added, along with documentation for the new showComponentIconsInOutline feature.

Custom Component Icons

• Added an icon field to multiple demo component configs (Button, Card, Flex, Grid, Heading, Hero, Logos, Space, Stats, Template, Text) to display custom icons in the drawer and outline. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

• Updated the UI to support the new showComponentIconsInOutline prop, allowing toggling between custom and default icons. (apps/demo/app/[...puckPath]/client.tsxR45, [1] [2]

Component Drawer Customization

• Added new UI override options: drawerContainer and drawerItem, enabling customization of the drawer layout and individual items. (apps/demo/app/[...puckPath]/client.tsxR66-R107, apps/docs/pages/docs/api-reference/overrides.mdxR23)

Documentation Updates

• Documented the new icon field for component configs and the showComponentIconsInOutline prop in the API reference and configuration docs. [1] [2] [3]

Demo and Example Updates

• Updated imports in demo component files to include relevant icons from lucide-react. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

Some optimizations might be needed.

2025-09-16.07-33-35.1.mp4

Rerendering in the video is due to an earlier change in the code.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
puck-demo	Ready	Preview	Comment	Oct 6, 2025 4:18pm
puck-docs	Ready	Preview		Oct 6, 2025 4:18pm

[vercel]

@OsamuBlack is attempting to deploy a commit to the Puck Team on Vercel.

A member of the Team first needs to authorize it.

[FedericoBonel]

Hey @OsamuBlack!

Thanks for the contribution 🙏.

Just a quick heads-up: the issue is still marked as in triage. That means it’s not fully ready for implementation yet, and it might take us a bit longer to review and decide how to move forward with this PR.
In general, it’s best to wait until an issue is marked as ready before starting to work on it. That way, you’ll have all the necessary context and we’ll be better prepared to review your changes. You can read more about our process in the Contributing Guide.