Skills Icons

repository·main·Indexed 42 days ago

A service that generates customizable SVG icon sets for technology stacks. It provides an API to display skills in READMEs, websites, or portfolios via a URL, featuring support for system theme adaptation (Dark/Light mode), configurable icons per line, and adjustable corner radius.

Tokens: 1.4K
Snippets: 6
Records: 9
Agent score: 55%

What's inside Skills Icons

Run Skills Icons using Docker
main
You can containerize the application using Docker (version 18.09 or higher).
```
# Build the Docker image
docker build -t skills-icons .

# Run the Docker container (maps host port 3000 to container port 3000)
docker run -p 3000:3000 skills-icons
```
https://github.com/syvixor/skills-icons/blob/main/README.md
Use Skills Icons via API
main
You can showcase your tech stack by requesting icons via a URL. Simply provide a comma-separated list of icon names as a query parameter. The icons automatically adapt to the user's system theme (Dark or Light mode) using the prefers-color-scheme CSS media query.
```
https://skills.syvixor.com/api/icons?i=ts,node,expressjs,vue,nuxt,mongodb,prisma
```
https://github.com/syvixor/skills-icons/blob/main/README.md
Find available icons with the URL Builder
main
To browse, search, and find the exact names for the icons you want to use, use the official URL Builder.
https://github.com/syvixor/skills-icons/blob/main/README.md
Set up Skills Icons for development
main
To run the project locally for development, clone the repository and use pnpm (or npm) to install dependencies and start the dev server.
```
# Clone the repository
git clone https://github.com/syvixor/skills-icons.git

# Install dependencies
pnpm install # or npm install

# Run development server
pnpm dev # or npm run dev
```
https://github.com/syvixor/skills-icons/blob/main/README.md
Configure Skills Icons API parameters
main
When calling the API, you can customize the output using the following query parameters:
Parameter Description Required Default
i Comma-separated list of icon names Yes /
perline Number of icons per line No 15
radius Icon(s) corner radius (value between 25 and 85) No 40
https://github.com/syvixor/skills-icons/blob/main/README.md
List all available icons via `/icons/all`
main
The /icons/all endpoint returns a JSON list of all available icons in the repository. Each entry includes the icon's unique ID, its display name (extracted from the SVG title attribute or the filename), and a direct URL to the raw SVG file on GitHub.
Response Format
```
{
  "statusCode": 200,
  "statusMessage": "OK",
  "data": [
    {
      "id": "icon-id",
      "name": "Icon Name",
      "url": "https://raw.githubusercontent.com/syvixor/skills-icons/refs/heads/main/icons/icon-id.svg"
    }
  ]
}
```
```
GET /icons/all
```
https://github.com/syvixor/skills-icons/blob/main/src/routes/index.ts
Fetch generated SVG icon sets via `/icons`
main
The /icons endpoint allows you to request a single SVG containing multiple skill icons arranged in a grid. You can specify which icons to include, the number of icons per line, and the corner radius of the icon backgrounds.
Query Parameters
- i (required): A comma-separated list of icon identifiers (e.g., react,node,ts). You can use short names (see Short Names Reference) or full names.
- perline (optional): The number of icons to display per line. Must be between 1 and 15. If invalid or omitted, the default layout is used.
- radius (optional): The rx value for the <rect> element in the icon's background. It is clamped between 25 and 85. Defaults to 40.
Response
- Content-Type: image/svg+xml
- Cache-Control: public, s-maxage=86400, stale-while-revalidate=3600
```
GET /icons?i=react,nodejs,typescript&perline=3&radius=20
```
https://github.com/syvixor/skills-icons/blob/main/src/routes/index.ts
Use the Skills Icons API
main
The Skills Icons project provides an Express-based API that serves icons and provides builder functionality. The main entrypoint exports an api instance (an Express application) configured with security headers (Helmet), CORS, and specific routing for SVG assets.
Key Endpoints
- / and /builder: Redirects to the Skills Icons Builder.
- /api: The base path for all API-related routes (defined in the internal router).
Asset Handling
When requesting .svg files, the API automatically sets the following headers to ensure compatibility with cross-origin embedding:
- Content-Type: image/svg+xml
- Content-Security-Policy: default-src 'self' data: 'unsafe-inline'
- Cross-Origin-Resource-Policy: cross-origin
```
import api from './path-to-skills-icons/src/index';

// The exported 'api' is an Express instance that can be used
// as a middleware or started directly.
api.listen(3000);
```
https://github.com/syvixor/skills-icons/blob/main/src/index.ts

Parameter	Description	Required	Default
`i`	Comma-separated list of icon names	Yes	/
`perline`	Number of icons per line	No	15
`radius`	Icon(s) corner radius (value between 25 and 85)	No	40

Short Names Reference

main

The API supports several short names to simplify query strings. If a short name is provided, it is mapped to the full icon filename.

Short Name	Full Name	Short Name	Full Name
`access`	`microsoftaccess`	`aws`	`amazonwebservices`
`ae`	`adobeaftereffects`	`chrome`	`googlechrome`
`angular`	`angularjs`	`express`	`expressjs`
`arc`	`arcbrowser`	`go`	`golang`
`aws`	`amazonwebservices`	`js`	`javascript`
`c4d`	`cinema4d`	`node`	`nodejs`
`d3`	`d3js`	`react`	`reactjs`
`drf`	`djangorestframework`	`solid`	`solidjs`
`es`	`elasticsearch`	`tailwind`	`tailwindcss`
`gh`	`github`	`ts`	`typescript`
`gcp`	`googlecloud`	`vue`	`vuejs`
`gemini`	`googlegemini`	`vscode`	`visualstudiocode`

(Note: This is a partial list extracted from the source. Check the source code for the complete mapping.)

Skills Icons

What's inside Skills Icons

Response Format

Query Parameters

Response

Key Endpoints

Asset Handling