Custom icons

Every widget takes an icons prop. Each slot accepts any React node — an SVG component, an <img>, or an emoji.

Not set — the built-in icon.
null — no icon. Close buttons always keep one.
SVGs that use currentColor pick up the widget's theme colors.

Examples

import { Bug, Gift, Heart, Link2, X } from "lucide-react"; // any icon set works

<FeedbackWidget icons={{ trigger: <Bug />, notification: { hint: "✨" }, toast: { success: "✅" } }} />

<ReferralWidget icons={{ button: <Gift />, copy: <Link2 />, share: null, close: <X /> }} />

<RatingProvider icons={{ star: <Heart />, thumbUp: "🔥", thumbDown: "🧊" }}>
  <Rating ratingKey="recipe" variant="stars" icons={{ star: "🍕" }} />
</RatingProvider>

<FeedbackModal icons={{ trigger: <Bug />, recording: "🎥" }} />

Slots

Prop	Type	Description
`FeedbackWidget`	`FeedbackIcons`	trigger, triggerActive, success, notification.{info,hint,offer,reward,social,urgent}, toast.{success,error,info}
`FeedbackModal`	`FeedbackModalIcons`	trigger, area, screenshot, recording, stop, remove, close, success
`ReferralWidget`	`ReferralIcons`	button, close, copy, share (appIcon and buttonIcon props still work)
`RatingProvider / <Rating> / requestRating`	`RatingIcons`	star, thumbUp, thumbDown, emotions[value], close, trigger
`<RatingTrigger>`	`icon prop`	Falls back to the provider's icons.trigger.

Icons are set in code

Icons are React elements, so they can't be saved on the dashboard. Emotion faces can also be changed as plain emoji with the emotions rating setting, which does work from the dashboard.

A custom star is drawn twice — faded for empty, clipped for filled — so half stars keep working. Without thumbDown, the thumbs-down button shows thumbUp flipped.