DEV Community

SATO, Yoshiyuki
SATO, Yoshiyuki

Posted on • Edited on

Special icons for social accounts on GitHub

#github

You can have up to 4 social account links on your GitHub profile.

Follow the steps below for the settings.
Your avatar on the top right of GitHub → settings → "Public profile" → "Social accounts"

https://github.blog/changelog/2023-02-02-add-more-social-links-to-your-user-profile/

You can now add up to 4 links to any social accounts to your user profile, with special support for popular platforms.

It states that it has "special support for popular platforms".
For example, if you register a Twitter URL, the chain icon will replace the Twitter icon.

Specifically, I checked what platforms are supported.
The checking method is simply looking at the HTML source.

If you have any of the following social accounts, I recommend registering them on GitHub (up to 4).

As of 2023-05-06, 9 social accounts seem to be supported.

Added on 2023-10-14: The npm account logo has been added and it seems to be compatible with 10 types of social accounts.

Added on 2025-03-01: The bluesky account logo has been added.

X (twitter)

Regex:

^https://(?:www\.)?(?:twitter|x)\.com/([^/?]+)/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://twitter.com/test
Enter fullscreen mode Exit fullscreen mode

X Image

facebook

Regex:

^https://(?:[^.]+\.)?facebook\.com/(?:[^/?]+/?|profile\.php\?id=\d+)$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://facebook.com/test
Enter fullscreen mode Exit fullscreen mode

Facebook Image

instagram

Regex:

^https://(www\.)?instagram\.com/[^/?]+/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://instagram.com/test
Enter fullscreen mode Exit fullscreen mode

Instagram Image

linkedin

Regex:

^https://(?:www\.)?linkedin\.com/(?:in|company)/[^/?]+/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://linkedin.com/in/test
Enter fullscreen mode Exit fullscreen mode

Linkedin Image

reddit

Regex:

^https://(?:www\.)?reddit\.com/u(?:ser)?/([^/?]+)/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://reddit.com/u/test
Enter fullscreen mode Exit fullscreen mode

Reddit Image

twitch

Regex:

^https://(?:www\.)?twitch\.tv/[^/?]+/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://twitch.tv/test
Enter fullscreen mode Exit fullscreen mode

Twitch Image

youtube

Regex:

^https://(?:www\.)?youtube\.com/(user|c)/[^/?]+/?$
^https://(?:www\.)?youtube\.com/channel/[a-zA-Z0-9_-]{24}/?$
^https://(?:www\.)?youtube\.com/@[^/?]+/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://youtube.com/user/test
Enter fullscreen mode Exit fullscreen mode

Youtube Image

mastodon

I don't know the specific pattern, but Mastodon seems to be supported.

Test URL:

https://mastodon.social/@test
Enter fullscreen mode Exit fullscreen mode

Mastodon Image

hometown

hometown seems to be a SNS that forked mastodon.

Test URL:

https://rage.love/@test
Enter fullscreen mode Exit fullscreen mode

I created a test URL from the server list on the following site.

https://github.com/hometown-fork/hometown/wiki/Hometown-servers

The icon looks the same as the mastodon.

Hometown Image

npm

Added on 2023-10-14.

Regex:

^https://(?:www\.)?npmjs\.com/~([^/?]+)/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://npmjs.com/~test
Enter fullscreen mode Exit fullscreen mode

Npm Image

bluesky

Added on 2025-03-01.

Regex:

^https://bsky\.app/profile/([^@/]+)/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://bsky.app/profile/test
Enter fullscreen mode Exit fullscreen mode

Bluesky Image

Top comments (0)