May 20, 2025

Brand Icons Made Simple

Most icon packs and libraries out there don't include brand icons. The ones that do usually have a very limited set of them. There's also the problem of brand guidelines. You see, not all companies are chill when it comes to you using their logos or other brand assets. For example, Discord has a dedicated page for legal brand guidelines.

simple-icons is an open source package with over 3000 brand icons. Each icon doesn't only come with what's required to render an SVG. It also comes with the licensing information and usage guidelines. It basically solves the problem of brand icons for developers.

Here's a simple component I made in Svelte to allow me to use simple-icons throughout my projects:

<script lang="ts">
  import type { SimpleIcon } from "simple-icons";
 
  let {
    icon,
    size = 24,
    color = "currentColor",
  }: { icon: SimpleIcon; size?: number; color?: string } = $props();
</script>
 
<svg
  role="img"
  fill={color ?? `#${icon.hex}`}
  width={size}
  height={size}
  viewBox="0 0 24 24"
>
  <title>{icon.title}</title>
  <path d={icon.path} />
</svg>

Here's how it's used:

<script lang="ts">
  import { siGithub } from "simple-icons";
 
  import BrandIcon from "$lib/components/BrandIcon.svelte";
</script>
 
<button onclick={githubSignIn} class="btn">
  Login
  <BrandIcon icon={siGithub} />
</button>

Super simple.