FAQPage

Question

What is the Custom Button Icons Carrd plugin?

Answer

The Custom Button Icons plugin is a free Carrd template that lets you add fully custom SVG icons to your Carrd button elements instead of using the default icon options.

Question

What is this plugin useful for?

Answer

It is useful for customizing button designs with unique SVG icons, such as branding elements, social buttons, call-to-action buttons, or any interface where default Carrd icons are not sufficient.

Question

Is the Custom Button Icons template free?

Answer

Yes. The Custom Button Icons Carrd plugin template is provided as a free resource that you can download and use on your own Carrd site.

Question

How do I install the Custom Button Icons on my Carrd site?

Answer

Download the template and copy all code from the four Embed elements into your Carrd site. Ensure the Embed element named "Custom button icon" is placed last at the bottom of your page.

Question

How do I add custom SVG icons to the buttons?

Answer

Find SVG icons from a site like SVGRepo, copy the SVG code, and paste it into the Raw SVG Embed elements (such as svg01, svg02, svg03) inside the corresponding JavaScript variables.

Question

How do I connect the icons to my buttons?

Answer

In the "Custom button icon" Embed code, replace the BUTTONS_ELEMENT_ID value with the ID of your Buttons element. Then arrange your icons in the SVG_LIST array to match the button order.

Question

Can I change the color of the SVG icons?

Answer

Yes. You can customize icon colors by editing the SVG_COLORS array and replacing the hex color values with your preferred colors, or setting values to null to keep default colors.

Question

How do I add more or skip SVG icons?

Answer

To add more icons, duplicate an existing Raw SVG Embed element and define a new SVG variable. To skip an icon, leave its SVG value empty so the default Carrd icon is used instead.

Question

How do I change the size of the SVG icons?

Answer

You can change the icon size by editing the width and height values in the CSS under the .custom-svg class inside the style tags.

Question

What if I want to customize the code further?

Answer

For additional customizations, you can modify the code directly or use AI tools by pasting the full code and asking specific questions, such as how to adjust colors or behavior for individual icons.