CUSTOM ICON

A free Carrd plugin template to add your own custom icon to your Carrd site.The blue mushroom icon below is a custom icon from SVGRepo👇

• TikTok
• Instagram
• Upload
• X
• Threads

• Download this FREE plugin
• See more Carrd plugins

Made by @jasonleowsg

Tutorial

Here's a step-by-step walk-through on how to set up your custom icon Carrd plugin:1. Download the custom icon plugin Carrd template from the download page.


2. Open the template, find the Embed element labelled "Custom icon plugin". Find the "Code" input field, and copy all the code.


3. Add (+) a new Embed element in your own Carrd site, paste the code in the "Code" input field. Remember to set the Embed element's Style to Inline, and uncheck "Defer script tags".


4. Find the the code under the top section where it says:<script>
...
//----- 💻 EDIT THE CODE ONLY IN THIS SECTION TO CUSTOMIZE YOUR PLUGIN 💻 -----//
...



5. Click on the Icons group on your Carrd site where you want to add a custom icon, and go to Settings to find the element ID of the Icons group. It should be something like "icons02". You don't need to change it (But for Pro Plus users, you can change it to whatever you want). Edit the code in your Embed element by replacing the value of the ICONS_LIST_ID with the referenced ID.const ICONS_LIST_ID = "icons02"



6. Edit the code by replacing the value of ICON_INDEX with the order position of your the Icon you want to change to a custom icon. For example, if you had a set of 5 Icons in an Icons group and you want to change the 3rd icon to a custom one t, you can set the value of ICON_INDEX to 3.const ICON_INDEX = 3



7. Continue editing the code. Replace the value of IMAGE_SRC by pasting the direct image link/URL of your custom icon. On the browser, right click over your icon, select Copy Image Address - that's the direct image link. You can get icons from public and free libraries like SVGRepo. You can use .svg, .png, .jpg files.const IMAGE_SRC = "https://www.svgrepo.com/show/488297/mushroom.svg"



8. If your custom icon is too big or too small when rendered on your Carrd site, you can adjust the width and height by editing the values of IMAGE_WIDTH AND IMAGE_HEIGHT. The numbers are in px.const IMAGE_WIDTH = 65
const IMAGE_HEIGHT = 65



9. Publish your Carrd site, and done!


🚨 SIDE-NOTE: Please do not touch any code below the section that says "Do not edit the code from here onwards below"://----- 🚨 DO NOT EDIT THE CODE FROM HERE ONWARDS BELOW! 🚨 -----//