Skip to main content

I want to design badges that relate to our our leaderboard, specifically using the same icon that displays for the top 3 on the leaderboard. 

How can I get that file? 

Hey @DannyPancratz - those are SVG files so there isn’t really an image file related to them that we can share.  What you can do, is grab all the code you need to replicate it directly from the page.  You can then use a text editor and save it as an SVG file.  Here’s an example that will give you an unstyled (black) version of that image:

<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <path d="M22.6668 13.9067V2.66666H9.3335V13.9067C9.3335 14.3733 9.5735 14.8133 9.98683 15.0533L15.5602 18.4L14.2402 21.52L9.6935 21.9067L13.1468 24.8933L12.0935 29.3333L16.0002 26.9733L19.9068 29.3333L18.8668 24.8933L22.3202 21.9067L17.7735 21.52L16.4535 18.4L22.0268 15.0533C22.4268 14.8133 22.6668 14.3867 22.6668 13.9067ZM17.3335 16.3067L16.0002 17.1067L14.6668 16.3067V3.99999H17.3335V16.3067Z" fill="currentColor"></path>
</svg>

If you’re using TextEdit on a Mac make sure to switch to plain text and save it as Unicode (UTF-8).

Thanks, @Kenneth R! That was very helpful and I learned something new!

For others who may later look to do this and want to change the color, here’s what ChatGPT told me when I asked how to change the icon’s color. (Though it’s obvious now that I see it there in the code)

To change the color of the SVG, you can modify the `fill` attribute of the `<path>` element from `"currentColor"` to any desired color value, such as a hex code, RGB, or a named color. Here's an updated version of the code where the color is set to blue (`#0000FF`):

<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <path d="M22.6668 13.9067V2.66666H9.3335V13.9067C9.3335 14.3733 9.5735 14.8133 9.98683 15.0533L15.5602 18.4L14.2402 21.52L9.6935 21.9067L13.1468 24.8933L12.0935 29.3333L16.0002 26.9733L19.9068 29.3333L18.8668 24.8933L22.3202 21.9067L17.7735 21.52L16.4535 18.4L22.0268 15.0533C22.4268 14.8133 22.6668 14.3867 22.6668 13.9067ZM17.3335 16.3067L16.0002 17.1067L14.6668 16.3067V3.99999H17.3335V16.3067Z" fill="#0000FF"></path>
</svg>

You can replace `#0000FF` with any other color code to change the color as needed.

Reply


Terms & ConditionsCookie settings