https://framer.com/m/IconsPro-jaPM.js
IconsPro
IconsPro renders any Phosphor glyph by name, at any weight, and can cycle through a list on click with a slide or rotate transition. It is the icon primitive for the system — do not reach for Framer’s stock vector sets.
Examples
Live specimens for every control the component exposes.
Default
A glyph is addressed by its Phosphor name in PascalCase, at 16px in the regular weight.
Glyph
iconName accepts any name from the Phosphor set. An unknown name falls back to Heart.
Size
size is a pixel value. Match it to the type step beside it rather than scaling the layer.
14px
16px
24px
32px
Weight
Six Phosphor weights, so a glyph can match the density of the surface it sits on.
thin
light
regular
bold
fill
duotone
Colour
color takes a theme token. Icons carrying meaning use Core/primary or Semantic/warning-color.
Core/primary
Text/text-color
Text/text-secondary
Semantic/warning
Click to cycle
With clickChangeIcons on, the glyph advances through the name list on each click. animation picks how the swap reads.
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for IconsPro
A scalable glyph is needed with theme colour, size and weight.
An icon should advance through states on click.
A glyph transition should animate rather than snap.
Icons need preloading and caching across a page.
Reach for something else
The glyph is not in the Phosphor set — use SVGPro.
You want Lucide rather than Phosphor — use IconProLucide.
The icon is the whole control — use Button with iconButton.
Io — UI Basics
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.