Pretty Checkbox React offers a lot of flexibility in rendering custom content in the Checkbox and Radio components. You can render any font icon library, SVG, or image file.

Font Icon Library

In this example we're using Material UI fonts @mdi/icons, though you are free to choose your preferred icon library.

Pay Bills
Fuel Refill
Buy Groceries
Show Code

SVGs

Similar to using a font icon library, use the svg prop and pass in your SVG source or react component.

Recurring
Done
Lock
Show Code

Note: SVG can be quite unpredictable to style. The underlying TPL, pretty-checkbox attempts to color custom SVG components based on few assumptions. Occasionally, it might return weird results and you'll need to override styles yourself.

Images

Using images? No problem. Pass your image to the image prop.

Agree
Subscribe
Cancel
Yes
Show Code