skill-icons Documentation

File: readme.md Copy Chapter

Showcase your skills on your GitHub or resumé with ease!

Powered by Cloudflare Workers ⚡

NOTE: To keep icons consistent and to ensure browser support, we don't accept pull requests for icon submissions. If you would like an icon added, please open an issue.

Docs

• Example
• Specifying Icons
• Themed Icons
• Icons Per Line
• Centering Icons
• Icons List

Example

Specifying Icons

Copy and paste the code block below into your readme to add the skills icon element!

Change the ?i=js,html,css to a list of your skills separated by ","s! You can find a full list of icons here.

[![My Skills](https://skillicons.dev/icons?i=js,html,css,wasm)](https://skillicons.dev)

Themed Icons

Some icons have a dark and light themed background. You can specify which theme you want as a url parameter.

This is optional. The default theme is dark.

Change the &theme=light to either dark or light. The theme is the background color, so light theme has a white icon background, and dark has a black-ish.

Light Theme Example:

[![My Skills](https://skillicons.dev/icons?i=java,kotlin,nodejs,figma&theme=light)](https://skillicons.dev)

Icons Per Line

You can specify how many icons you would like per line! It's an optional argument, and the default is 15.

Change the &perline=3 to any number between 1 and 50.

[![My Skills](https://skillicons.dev/icons?i=aws,gcp,azure,react,vue,flutter&perline=3)](https://skillicons.dev)

Centering Icons

Want to center the icons in your readme? The SVGs are automatically resized, so you can do it the same way you'd normally center an image.

<p align="center">
  <a href="https://skillicons.dev">
    <img src="https://skillicons.dev/icons?i=git,kubernetes,docker,c,vim" />
  </a>
</p>

Icons List

Here's a list of all the icons currently supported. Feel free to open an issue to suggest icons to add!

💖 Support the Project Copy Chapter

Thank you so much already for using my projects! If you want to go a step further and support my open source work, buy me a coffee:

To support the project directly, feel free to open issues for icon suggestions, or contribute with a pull request!

File: package.json Copy Chapter

{
"name": "skill-icons",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "node build.js && miniflare --watch",
"build": "node build.js",
"deploy": "node build.js && wrangler publish"
},
"devDependencies": {
"@cloudflare/wrangler": "^1.19.8",
"miniflare": "^2.3.0",
"prettier": "^2.5.1"
}
}

File: .github/FUNDING.yml Copy Chapter

These are supported funding model platforms

github: [tandpfun]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: thijsdev
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
polar: # Replace with a single Polar username
buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

File: .github/ISSUE_TEMPLATE/bug-report.yml Copy Chapter

name: 🐛 Bug Report
title: '[BUG REPORT] Bug'
labels: 'bug report'
body:

• type: input
  id: bug
  attributes:
  label: The bug
  validations:
  required: true

• type: input
  id: steps
  attributes:
  label: Steps to reproduce
  placeholder: "1. Request API..."
  validations:
  required: false

• type: input
  id: extra
  attributes:
  label: Any extra info
  validations:
  required: false

File: .github/ISSUE_TEMPLATE/feature-request.yml Copy Chapter

name: 💡 Feature Request
title: '[FEATURE REQUEST] Feature'
labels: 'feature request'
body:

skill name block

• type: input
  id: request
  attributes:
  label: Feature requested
  placeholder: "Add this endpoint because..."
  validations:
  required: true

File: .github/ISSUE_TEMPLATE/suggest-icon.yml Copy Chapter

name: 🚀 Suggest an Icon
title: '[NEW ICON] Skill Name'
labels: 'icon suggestion'
body:

skill name block

• type: input
  id: skill-name
  attributes:
  label: Skill Name
  placeholder: "VS Code"
  validations:
  required: true

reason to add block

• type: textarea
  id: reason
  attributes:
  label: Why?
  placeholder: "It's popular for web development..."
  validations:
  required: true

reference image block

• type: textarea
  id: reference-image
  attributes:
  label: Reference Image
  placeholder: "Feel free to drag and drop the files here."
  validations:
  required: false

File: .github/workflows/wrangler-action.yml Copy Chapter

name: Deploy

on:
push:
branches:
- main

jobs:
deploy:
runs-on: ubuntu-latest
name: Deploy
steps:
- uses: actions/checkout@v2

- name: Set up Node.js
    uses: actions/setup-node@v1
    with:
      node-version: 16

  - name: build
    run: yarn build

  - name: Publish
    uses: cloudflare/[email protected]
    with:
      apiToken: ${{ secrets.CF_API_TOKEN }}