.png)
4 months ago
16
Be iconic, not generic.
A dev-focused library of sleek, bubble-shaped skill icons built for GitHub READMEs, portfolios, and resumes.
- 🟦 Bubble icons designed for clarity and aesthetics
- 🌙 Light & dark theme variants for every icon
- 🧩 Easy to embed in Markdown, HTML, or anywhere
- ⚙️ HTML preview API with Django backend
- 💾 Download-ready SVGs
ICONIC
├── repo config files ( README, workflows, contributing.md, etc )
├── icon-templates/
├── icons/
| ├── dark/
| │ ├── python.svg
| │ ├── javascript.svg
| │ ├── ....
| └── light/
| ├── python.svg
| ├── javascript.svg
| ├── ....
└── api/
Here's a sample of some icons:
## Markdown
<div>
<img src="https://iconic-api.onrender.com/dark/python" width="64px" />
<img src="https://iconic-api.onrender.com/dark/html" width="64px" />
<img src="https://iconic-api.onrender.com/dark/js" width="64px" />
<div>'>## HTML
<!-- Use div tag for good format and it will show them in one line, without div tag it will be displayed on multiple lines -->
<div>
<img src="https://iconic-api.onrender.com/dark/python" width="64px" />
<img src="https://iconic-api.onrender.com/dark/html" width="64px" />
<img src="https://iconic-api.onrender.com/dark/js" width="64px" />
<div>
Note
It's recommended to use the HTML snippet in GitHub READMEs, as it allows better control over size, styling, and layout.
# Clone the repo
git clone https://github.com/YuheshPandian/ICONIC.git
cd ICONIC
Have a new icon idea or want to help expand the collection?
Pull requests are welcome!
- Create your icon using a photo editing software (Inkscape preferred) and open the dark/light icon template and start editing.
- Add the dual versions of icon in respective dark/light folders
- Push the changes if completed
Please follow the existing folder structure (dark/ and light/), keep icon dimensions consistent (e.g., 512x512 SVG), and use meaningful file names.
