Skip to Content
DocumentationPreset Icons

Integrate with Simple Icons

To make creating branded folder icons even easier, FolderKit now offers a dynamic API endpoint that integrates with the extensive Simple Icons library. You can now generate a folder icon for thousands of popular brands simply by visiting a URL.

The base URL for the API is: https://folderkit.vercel.app/api/.

Basic Usage

The most basic way to use the API is to append an icon’s slug to the base URL. The slug should match the name found on the Simple Icons website (e.g., typescript, visualstudiocode, nextdotjs).

For example, to generate a folder icon with the TypeScript logo, you can use the following URL:

https://folderkit.vercel.app/api/typescript
TypeScript Folder Icon

This will generate an icon using the default options: the BigSurLight theme and a 256x256 resolution.

Customization via Query Parameters

The real power of this API comes from its support for query parameters, allowing you to customize the icon’s appearance on the fly.

Changing the Theme

You can specify a folder theme using the theme parameter.

  • Example (Dark Theme):

    https://folderkit.vercel.app/api/react?theme=BigSur.dark
    React Folder Icon Dark
  • Example (Tahoe Theme):

    https://folderkit.vercel.app/api/react?theme=Tahoe
    React Folder Icon Tahoe

Applying Brand Color

A special feature of this API is the ability to automatically tint the folder icon with the official brand color from Simple Icons. To enable this, add the brand=true parameter.

  • Example (With Brand Color):

    [https://folderkit.vercel.app/api/vite?brand=true](https://folderkit.vercel.app/api/vite?brand=true)
    Vite Folder Icon with Brand Color

This automatically extracts the brand’s hex code (#646CFF for Vite) and applies it as a tintColor filter, creating a beautifully branded folder icon.

Adjusting the Resolution

You can request a specific size using the resolution parameter.

  • Example (High Resolution):

    https://folderkit.vercel.app/api/pnpm?resolution=Retina512
    pnpm Folder Icon High Resolution

The default resolution is NonRetina256 (256x256) if not specified.

Combining Options

You can combine all parameters to generate a fully customized icon. Here is an example that creates a high-resolution, dark-themed, brand-colored icon for Next.js:

https://folderkit.vercel.app/api/nextdotjs?theme=BigSur.dark&brand=true&resolution=Retina512
Custom Next.js Folder Icon
Last updated on