Documentation for markdown buttons.

MD_BUTTONS_DOCS.md

Markdown Buttons

A collection of SVG buttons for displaying custom "buttons" in Markdown content. You are free to use these buttons wherever you like. All buttons were created in Figma, with (most) icons provided by the Iconify plugin.

The SVG files can be found on this gist. They have been separated in order to reduce the amount of lag when loading this README file.

Important Notes

• If you have linked to the Twitter button, it'll automatically update to show the X logo. If you would like to continue using the Twitter logo, please use the Twitter (Legacy) icon instead.

Linking to Buttons

To link to a button, use the following URL, replacing "SERVICE" with the service name (see services table below). Additionally, some buttons have animated, icon and compact variants, which can be accessed by appending either -animated, -compact or -icon to the service name.

https://gist.github.com/cxmeel/0dbc95191f239b631c3874f4ccf114e2/raw/SERVICE.svg

Embedding in Markdown

Use standard markdown formatting to embed these buttons. For example, to create a button that proceeds to a link when clicked, use the following format:

[![Get it on SERVICE](https://gist.github.com/cxmeel/0dbc95191f239b631c3874f4ccf114e2/raw/SERVICE.svg)](https://example.com/...)

Resizing

Services like Discourse allow for markdown images to be resized. This is especially useful when you want to create a row of buttons that include compact-style and icon buttons. Compact buttons are 32px height. You can use this to create small icon buttons using the following syntax:

[![Get it on SERVICE|32x32](https://gist.github.com/cxmeel/0dbc95191f239b631c3874f4ccf114e2/raw/SERVICE-icon.svg)](https://example.com/...)

Other services, like GitHub, may require you to use HTML instead. Usually you can mix <img /> tags with markdown syntax:

[<img src="https://gist.github.com/cxmeel/0dbc95191f239b631c3874f4ccf114e2/raw/SERVICE-icon.svg" alt="Get it on SERVICE" height="32" />](https://example.com/...)

Examples

Example	Service Name	Variant Name	URL suffix
	roblox_dev		roblox_dev.svg
	roblox_dev	-icon	roblox_dev-icon.svg
	roblox_dev	-compact	roblox_dev-compact.svg
	roblox_dev	-animated	roblox_dev-animated.svg

Services

Services are now grouped alphabetically. You can use the list below to quickly jump to a letter.

A	B	C	D	E	F	G	H	I
J	K	L	M	N	O	P	Q	R
S	T	U	V	W	X	Y	Z	0
1	2	3	4	5	6	7	8	9

B

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	behance	FOLLOW	✔️	✔️	✔️	❌
	bitbucket	GET IT ON	✔️	✔️	✔️	❌
	bitbucket_source	SOURCE	✔️	❌	❌	❌

C

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	crates_io	GET IT ON	✔️	✔️	✔️	❌

D

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	discord	JOIN US	✔️	✔️	✔️	❌
	documentation		✔️	✔️	✔️	❌
	docs		✔️	✔️	❌	❌
	documentation_learn	DOCUMENTATION	✔️	❌	❌	❌
	download		✔️	✔️	✔️	❌
	dribbble	FOLLOW	✔️	✔️	✔️	❌

F

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	facebook	JOIN US	✔️	✔️	✔️	❌
	facebook_like	LIKE ON	✔️	❌	❌	❌
	figma_blue	GET IT ON	✔️	✔️	✔️	❌
	figma_green	GET IT ON	✔️	✔️	✔️	❌
	figma_purple	GET IT ON	✔️	✔️	✔️	❌
	figma_red	GET IT ON	✔️	✔️	✔️	❌

G

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	github	GET IT ON	✔️	✔️	✔️	❌
	github_source	SOURCE	✔️	❌	❌	❌
	github_sponsor	GitHub	✔️	✔️	✔️	❌
	gitlab	GET IT ON	✔️	✔️	✔️	❌
	gitlab_source	SOURCE	✔️	❌	❌	❌
	guilded	JOIN US	✔️	✔️	✔️	❌

I

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	instagram	FOLLOW	✔️	✔️	✔️	❌
	itch	GET IT ON	✔️	✔️	✔️	❌

L

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	lua		✔️	✔️	✔️	❌
	luau		✔️	✔️	✔️	❌

M

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	mastodon	FOLLOW	✔️	✔️	✔️	❌

N

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	npm	GET IT ON	✔️	✔️	✔️	❌

P

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	patreon	SUPPORT	✔️	✔️	✔️	❌
	play		✔️	✔️	✔️	❌

R

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	roblox	GET IT ON	✔️	✔️	✔️	❌
	roblox_play	PLAY ON	✔️	❌	❌	❌
	roblox_join	JOIN ON	✔️	❌	❌	❌
	roblox_dev	GET IT ON	✔️	✔️	✔️	✔️
	roblox_dev_creator_store		✔️	✔️	❌	❌
	roblox_dev_marketplace		✔️	✔️	❌	❌
	roblox_dev_store		✔️	✔️	❌	❌
	roblox_dev_play	PLAY ON	✔️	❌	❌	❌
	roblox_dev_join	JOIN ON	✔️	❌	❌	❌
	roblox_ts		✔️	✔️	✔️	❌
	rust		✔️	✔️	✔️	❌

T

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	tiktok	FOLLOW	✔️	✔️	✔️	❌
	twitter	FOLLOW	✔️	✔️	✔️	❌
	twitter_legacy	FOLLOW	✔️	✔️	✔️	❌
	typescript		✔️	✔️	✔️	❌

W

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	wally	GET IT ON	✔️	✔️	✔️	❌

X

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	x	FOLLOW	✔️	✔️	✔️	❌

Y

Example	Service Name	Caption	Default (Large)	Compact	Icon	Animated
	yarn	GET IT ON	✔️	✔️	✔️	❌
	youtube	SUBSCRIBE	✔️	✔️	✔️	❌