Skip to content

Supported Icons

Christian Olsen edited this page Nov 2, 2024 · 3 revisions

These are the supported icons:

Supported Icons Supported Icons Supported Icons Supported Icons
amazon apple bandcamp bitbucket
bluesky certifications check-mark codepen
dev discord dribbble email
etsy facebook flickr foursquare
github gitlab google instagram
keybase kickstarter link linkedin
mastodon medium orcid patreon
paypal pgp-key pinterest reddit
signal skype slack snapchat
soundcloud spotify ssh-key stack-exchange
stack-overflow strava telegram tiktok
tumblr twitch untappd website
whatsapp windows x-twitter youtube

Please open a discussion if you want more icons added.

Custom Icons

You can provide your own icons by placing a .svg image in ./assets/icons/ in your own repo (creating folders when necessary). The image should be as circular as possible for the best result. Don't use spaces in the filename!

If you're using the colorful color scheme, the background color will be the tailwind color bg-indigo-500 (#6366f1) unless another color is specified. This can be done by placing the following css snippet in ./assets/css/custom.css:

.link-nameOfIcon {
  background-color: #6366f1; /* Hex color code */
}

Where nameOfIcon is the name of the custom .svg file.

SVG Icon Cheatsheet

Make sure that your custom svg icons doesn't have a fixed size. I.e. set the width and height to:

<svg width="100%" height="100%">

And make sure the icon doesn't have any style elements that defines the color.

Find all current icons here.

Clone this wiki locally