Carrd Icons
Hello!
I'm making this mini site with the hopes of figuring out a more convenient way to use carrd icons/svg symbols in websites!
With this, you can use Carrd icons in a way that works similarly to fontawesome, with a simple copy-paste of a short link and a short code for each icon! If you'd like to use this quickly and easily, check out the usage tab! The old local version is definitely outdated and not the most effective, but it should still work if you want to use it!
Finally, if you'd like to suggest any changes or learn more about this, check out the repo! This little project is open-source, so feel free to look through it!
How to Use
1. Check the icon list to make sure that the current file has the icons you want, since I'm still adding to it.
2. Paste this between the head tags of your website.
3. Add this to your CSS stylesheet, or in style tags in your HTML. (Please note you'll have to repeat this step on every page if you do the latter.) Tweak it as you see fit upon adding your icons!
4. For each icon, you'll use this format, changing "name" out for whatever the name of the icon is! Alternatively, you can copy-paste from the icon list!
And that's it! You can download the javascript file for a simple local version, but the other solution still works as well. This works as far as I've tested it, and I'm very happy with it!
Local Version
1. Check the icon list to make sure that the current file has the icons you want, since I'm still adding to it, and download the file.
2. Make sure to put the icons file in the base directory/main folder of your website.
3. Next, paste this between the head tags of your website.
4. Then, put this at the very end of your website. It should be the last thing before the closing body tag.
5. Add this to your CSS stylesheet, or in style tags in your HTML. (Please note you'll have to repeat this step on every page if you do the latter.) Tweak it as you see fit upon adding your icons!
6. For each icon, you'll use this format, changing "name" out for whatever the name of the icon is! Alternatively, you can copy-paste from the icon list!
You'll have to repeat steps 3-4 on each page with icons, but generally, this works as far as I've tried it! This method's a bit convoluted, so I'd suggest the other one, but it does work and will be kept up-to-date with the other method!
Icon List
Icons are listed in the order that made sense to me personally, but you can click the top of the chart to sort alphabetically!
| Icon | Title | Code |
|---|---|---|
| YouTube | ||
| TikTok | ||
| Snapchat | ||
| BeReal | ||
| Twitch | ||
| Discord | ||
| X | ||
| Threads | ||
| Bluesky | ||
| Mastadon | ||
| Fediverse | ||
| Pixelfed | ||
| Tumblr | ||
| Blogger | ||
| Mailchimp | ||
| Dreamwidth | ||
| Spacehey | ||
| Neocities | ||
| Carrd | ||
| Linktree | ||
| Pronouns.page | ||
| Patreon | ||
| Patreon (Alt) | ||
| Kofi | ||
| Buy Me a Coffee | ||
| Buy Me a Coffee (Alt) | ||
| Artistree | ||
| Gumroad | ||
| RedBubble | ||
| Shopify | ||
| Shopee | ||
| Etsy | ||
| Mercari | ||
| Ebay | ||
| Amazon | ||
| Throne | ||
| PayPal | ||
| Cash App | ||
| Venmo | ||
| Zelle | ||
| Canva | ||
| Procreate | ||
| Github | ||
| Gitlab | ||
| JSFiddle | ||
| Codepen | ||
| Stack Overflow | ||
| Scratch | ||
| Obsidian | ||
| Evernote | ||
| Notion | ||
| Trello | ||
| Drive | ||
| Dropbox | ||
| OneDrive | ||
| Telegram | ||
| Signal | ||
| Switch | ||
| Xbox | ||
| Steam | ||
| Game Jolt | ||
| Itch.io | ||
| Itch.io (Alt) | ||
| Epic Games | ||
| Valorant | ||
| Battle.net | ||
| Roblox | ||
| Minecraft | ||
| VR Chat | ||
| VR Chat (Alt) | ||
| Overwatch | ||
| Genshin | ||
| Honkai Star Rail | ||
| Honkai Impact 3rd | ||
| HoyoLab | ||
| Art Fight | ||
| Toyhouse | ||
| Cara | ||
| Art Street | ||
| Deviantart | ||
| Artfol | ||
| Fur Affinity | ||
| Curious Cat | ||
| Neospring | ||
| Tellonym | ||
| Archive of our Own | ||
| Wattpad | ||
| FanFiction.net | ||
| Webtoon | ||
| Tapas | ||
| Crunchyroll | ||
| AniList | ||
| Anime Planet | ||
| MyAnimeList | ||
| MyDramaList | ||
| Spotify | ||
| YouTube Music | ||
| Apple | ||
| Soundcloud | ||
| Bandlab | ||
| Amazon Music | ||
| iHeartRadio | ||
| Deezer | ||
| Deezer (Alt) | ||
| Pandora | ||
| Last.fm | ||
| Bandcamp | ||
| Boomplay | ||
| Tidal | ||
| Anghami | ||
| Audiomack | ||
| Yandex | ||
| Napster | ||
| KKBox | ||
| Gamepad | ||
| Phone | ||
| Mobile Phone | ||
| Cloud | ||
| Paw | ||
| Heart | ||
| Star | ||
| User | ||
| Search | ||
| Information | ||
| Calendar | ||
| Home | ||
| Plane | ||
| Globe | ||
| Location | ||
| Cart | ||
| Feed | ||
| Document | ||
| Upload | ||
| Download | ||
| QR Code | ||
| Link | ||
| Folder | ||
| Folder (Alt) |