Custom Button Icons
A free Carrd plugin template to add custom button icons to your Carrd buttons.The 1st and 3rd icons below are custom icons from SVGRepo👇
Tutorial
Here's how to set up the custom button icons in your Carrd site:1. — Download template2. — Copy all code over from the 4 Embed elements. Remember, the Embed element named "Custom button icon" must be at the bottom last.3. — Go to SVGRepo, search for an svg icon you want. Click on "Edit Vector", and then "Copy SVG" to copy the svg code to clipboard
4. — Paste the copied svg code <svg viewBox="0 0... in the Embed element "Raw SVGs - svg01. Remember to paste it within the ``const svg01 = `<svg viewBox="0 0...`;5. — Search for another svg and do the same in Embed element "Raw SVGs - svg02", and then Embed element "Raw SVGs - svg03"6. — Now move on to the Embed element "Custom button icon": Find this code:
// Replace the buttons01 with the element ID of your Buttons element
const BUTTONS_ELEMENT_ID = 'buttons01';
And replace buttons01 with the element ID of your Button group element (find it under Settings tab).7. — Next, look for this code:
// List the SVGs here in button order:
const SVG_LIST = [svg01, svg02, svg03];
Change the SVGs order if needed.8. — Next, look for this code:
// Any color overrides for each SVG (optional, or set to null)
const SVG_COLORS = ['#e63946', '#22c55e', '#6058f8'];
This is for custom colors for your SVG icons. Find the color hex code you want and replace it with your own.9. — To add more SVGs, duplicate the Raw SVGs - svg03 Embed element and renamed it to Raw SVGs - svg04 (and so on for more SVGs down the line). Paste the SVG code into svg04 just like in step #4.10. — To skip an SVG, just leave the svg value empty, like this (as you can see the 2nd SVG is using the default icon, not my own custom icon):const svg02 = ` `;11. — To change the size of the SVG icon, edit the width and height CSS in the <style> tags:
.custom-svg {
width: 32px !important;
height: 32px !important;