Get a GitHub User's Profile Image URL

GitHub provides a public API that lets you retrieve information about a GitHub user, including their current profile image URL.

The useful endpoint is:

text

https://api.github.com/users/{username}

For example:

text

https://api.github.com/users/octocat

The response contains an avatar_url property:

json

{
  "login": "octocat",
  "id": 583231,
  "avatar_url": "https://avatars.githubusercontent.com/u/583231?v=4",
  "html_url": "https://github.com/octocat"
}

Get the Profile Image with JavaScript

You can request the GitHub API using fetch():

const username = "octocat";

const response = await fetch(
  `https://api.github.com/users/${username}`
);

const user = await response.json();

console.log(user.avatar_url);

The result will be the user's current GitHub avatar URL.

You can then use it directly in an <img> element:

const username = "octocat";

const response = await fetch(
  `https://api.github.com/users/${username}`
);

const user = await response.json();

const image = document.querySelector("#github-avatar");

image.src = user.avatar_url;

HTML:

html

<img
  id="github-avatar"
  alt="GitHub profile picture"
/>

A Complete Example

html

<img id="github-avatar" alt="GitHub profile picture">

<script>
  async function loadGitHubAvatar(username) {
    const response = await fetch(
      `https://api.github.com/users/${username}`
    );

    if (!response.ok) {
      throw new Error("GitHub user not found");
    }

    const user = await response.json();

    document.querySelector("#github-avatar").src =
      user.avatar_url;
  }

  loadGitHubAvatar("octocat");
</script>

Usually You Shouldn't Hardcode the Avatar URL but u can:

if u do this then it will still give u updated profile picture url but takes some time to update

html

<img
  src="https://avatars.githubusercontent.com/u/583231?v=4"
  alt="GitHub avatar"
/>

Instead, get the URL from the GitHub API also possible:

const response = await fetch(
  "https://api.github.com/users/octocat"
);

const user = await response.json();

const avatarUrl = user.avatar_url;

Then:

image.src = avatarUrl;

This means your application asks GitHub for the user's current profile information instead of relying on a manually copied URL.

React Example

The same approach works in React:

jsx

import { useEffect, useState } from "react";

export default function GitHubAvatar({ username }) {
  const [avatarUrl, setAvatarUrl] = useState("");

  useEffect(() => {
    async function loadUser() {
      const response = await fetch(
        `https://api.github.com/users/${username}`
      );

      if (!response.ok) {
        return;
      }

      const user = await response.json();

      setAvatarUrl(user.avatar_url);
    }

    loadUser();
  }, [username]);

  return (
    <img
      src={avatarUrl}
      alt={`${username}'s GitHub profile`}
    />
  );
}

Usage:

jsx

<GitHubAvatar username="octocat" />

What Happens When the User Changes Their Profile Picture?

Your application does not need to know the new image URL manually.

When you request:

text

GET https://api.github.com/users/{username}

GitHub returns the user's current profile information, including:

json

{
  "avatar_url": "CURRENT_AVATAR_URL"
}

So your application can simply request the user data again and use the new avatar_url.

For example:

async function getGitHubAvatar(username) {
  const response = await fetch(
    `https://api.github.com/users/${username}`
  );

  const user = await response.json();

  return user.avatar_url;
}

Then:

const avatar = await getGitHubAvatar("octocat");

console.log(avatar);

Important

The avatar_url is a URL provided by GitHub. Your application should treat it as dynamic data rather than constructing the avatars.githubusercontent.com URL yourself.

The basic flow is:

text

GitHub username
       ↓
GitHub REST API
       ↓
/users/{username}
       ↓
avatar_url
       ↓
<img src="...">

This same API response also gives you useful information such as:

user.login
user.name
user.bio
user.html_url
user.avatar_url
user.public_repos
user.followers
user.following

So if you're building a portfolio, documentation site, GitHub profile card, or developer dashboard, you can use the API response as the source of truth instead of manually storing the user's profile image URL.