Custom icons

Playbook comes with a library of built-in glyphs, but your brand probably has its own icon set — and using it makes an experience feel unmistakably yours. Upload your icons once and they show up first in the picker, ready to drop into any icon section — and when Playbook drafts an experience with icons, it leans toward yours over the generic ones.

Add your icons

Open the Brand page and switch to the Icons tab (it's also available inside the editor's Brand panel, so you can add one without leaving your work).

• Upload SVG or PNG / JPG / WEBP / GIF files — up to 2MB each, and up to 60 icons in your library. Use the Add button or drag files straight onto the pane.
• Playbook names each one for you and suggests when to use it. Both are editable — rename an icon and tweak its "when to use" note anytime (for example, "eco or sustainability claims"). Renaming only changes the label you see; it doesn't touch the internal reference Playbook uses to place the icon, so a rename never breaks a build.

Use them in the editor

Custom icons appear anywhere you pick an icon — in any section that uses one. Open the icon picker ("Select icon") and you'll find:

• A "Your icons" tab with just your uploads, and
• Your icons listed first in the "All" tab, ahead of the built-in glyphs.

Pick one and it drops into the section. SVG icons recolor automatically to match the surrounding brand color, so they always fit the section they're in. Raster icons (PNG/JPG) keep their own colors.

Let Playbook reach for them

You don't have to place every icon by hand. When Playbook drafts an experience with icon sections, the generator is told to prefer your custom icons over the built-in glyphs, and the "when to use" note you wrote helps it match an icon to each point — so your set is what it starts from. You can always swap any icon yourself afterward, and applying a saved template keeps your custom icons intact too.

A few notes

• SVG is the best format — it recolors to your brand palette, so one icon looks right on any background.
• Keep SVGs clean. Playbook won't accept an SVG that contains scripts, for safety.
• Deleting is safe. Removing an icon takes it out of the picker but leaves any live experience that already uses it rendering unchanged.

Next: put your icons to work in a real build — Create your first experience.