{"id":13529611,"url":"https://github.com/yne/picon","last_synced_at":"2025-10-24T08:45:25.467Z","repository":{"id":48131016,"uuid":"216182315","full_name":"yne/picon","owner":"yne","description":"Hackable Ligature Pico icoN set","archived":false,"fork":false,"pushed_at":"2024-05-01T18:58:49.000Z","size":2568,"stargazers_count":24,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T18:51:41.983Z","etag":null,"topics":["font","font-icons","icomoon","icons","ligature","ligatures","picon","svg","unicode","webfont","woff2"],"latest_commit_sha":null,"homepage":"https://yne.github.io/picon","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"ofl-1.1","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yne.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-19T09:38:10.000Z","updated_at":"2024-12-27T13:50:38.000Z","dependencies_parsed_at":"2024-04-13T11:43:38.681Z","dependency_job_id":"74a36b89-25c7-42cf-85e6-e302b475e56b","html_url":"https://github.com/yne/picon","commit_stats":{"total_commits":106,"total_committers":1,"mean_commits":106.0,"dds":0.0,"last_synced_commit":"3a05eef052dba8a80095970379f6c2133601b155"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yne%2Fpicon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yne%2Fpicon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yne%2Fpicon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yne%2Fpicon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yne","download_url":"https://codeload.github.com/yne/picon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248067904,"owners_count":21042375,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["font","font-icons","icomoon","icons","ligature","ligatures","picon","svg","unicode","webfont","woff2"],"created_at":"2024-08-01T07:00:37.854Z","updated_at":"2025-10-24T08:45:25.378Z","avatar_url":"https://github.com/yne.png","language":"HTML","funding_links":[],"categories":["GUI","General"],"sub_categories":["Font utils"],"readme":"# The Pico-icon set\n\n[![preview](https://raw.githubusercontent.com/yne/picon/gh-pages/solid.png)](list.html?solid)\n\n[Download](https://github.com/yne/picon/releases) | [Icon finder](https://yne.fr/picon/list?solid) | [Flags color demo](https://yne.fr/picon/list?flags) | [Editor](https://yne.fr/picon/edit)\n\n- ~900 libre icons released as ligatured Font, SVG, PNG, and JSON [icomoon](https://icomoon.io/app) project, [compare](https://github.com/yne/picon/wiki/format)\n- Hackable: Update or remove any svg, then simply rebuild with `make all`! You can also use [Icomoon](https://icomoon.io/app) (can't handle coloring).\n- Lightweight: Average SVGs are 5x lighter than Fontawesome, [source](https://github.com/yne/picon/wiki/size)\n- Designed on a 8-grid: to be readable at 8px 16px 24px 32px 48px ... [demo](https://github.com/yne/picon/wiki/render)\n- Thousand of icon [composition](#composition) possible\n- CDN backed via [unpkg.com](https://unpkg.com/picon) and [jsdelivr.net](https://cdn.jsdelivr.net/npm/picon)\n- Multicolor support ! [Example](https://yne.fr/picon/list?flags)\n# Usage \n\nTips: replace `solid` with the iconset you want (ex: `flags`)\n\n```html\n\u003c!-- SVG: for casual usage --\u003e\n\u003cimg src=\"//unpkg.com/picon/solid/app.svg\" alt=\"app\"\u003e\n\n\u003c!-- Sprites: for massive usage --\u003e\n\u003csvg\u003e\u003cuse xlink:href=\"//unpkg.com/picon/solid.svg#app\"\u003e\u003c/use\u003e\u003c/svg\u003e\n\n\u003c!-- Font: for ligature junky --\u003e\n\u003cstyle\u003e\n@font-face {\n  src: url(https://unpkg.com/picon);\n  font-family: picon;\n}\n.picon { font-family: picon; }\n\u003c/style\u003e\n\n\u003cspan class=picon\u003eapp\u003c/span\u003e\n```\n\n\u003e Tips: Always use a versioned CDN url (ex: `https://unpkg.com/picon@21.5.5/solid/...`) for production\n\n# Mardown Integration\n\nIf you don't need the `~~strikeout~~` mardown feature you can create a rule to show striked text as icons:\n\n```css\ndel, s {\n\tfont-family:picon; \n\ttext-decoration: none;\n}\n```\n\n[Live Demo](https://codepen.io/qxc32034/pen/PopoOzZ)\n\n# Composition\n\nTo stay lightweight, Picon does not provide any composed icons like `call-in`, `call-out`, `call-forward`.\n\nFollowing the previous Mardown `\u003cdel\u003e` example, you can compose using:\n\n```html\n\u003cstyle\u003e\ndel {\n\tfont-family: picon;\n\tword-spacing: -2em; /* Same size overlay */\n\ttext-decoration: none; /* un-strike */\n\ttext-shadow:/* white halo */\n\t-1px -1px 0 white,\n\t-1px -0px 0 white,\n\t-1px  1px 0 white,\n\t-0px -1px 0 white,\n\t-0px -0px 0 white,\n\t-0px  1px 0 white,\n\t 1px -1px 0 white,\n\t 1px -0px 0 white,\n\t 1px  1px 0 white;\n}\ndel\u003esup,del\u003esub{\n\tfont-size: .5em; /* twice smaller */\n\tmargin-left: -1em; /* right side*/\n}\ndel\u003esup{vertical-align:text-top;}\ndel\u003esub{vertical-align:text-bottom;}\n\u003c/style\u003e\n```\n\n\u003e Note: replace `del` with `s` or `.picon` according to your Mardown processor\n\nyou can now associate any [parent](list?solid#parent) with any [child](list?solid#child%7Carrow%7Clang) icon:\n\n```html\n\u003cdel\u003emicrophone not\u003c/del\u003e\n\u003cdel\u003ewifi4\u003csub\u003e!\u003c/sub\u003e\u003c/del\u003e\n\u003cdel\u003eprinter\u003csub\u003emagnifier\u003c/sub\u003e\u003c/del\u003e\n\u003cdel\u003ebluetooth\u003csub\u003eadd\u003c/sub\u003e\u003c/del\u003e\n\u003cdel\u003egsm0\u003csub\u003echain\u003c/sub\u003e\u003c/del\u003e\n\u003cdel\u003ewifi4\u003csub\u003e5g\u003c/sub\u003e\u003c/del\u003e\n\u003cdel\u003elock\u003csub\u003ewarning\u003c/sub\u003e\u003c/del\u003e\n\u003cdel\u003efile\u003csub\u003eattachment\u003c/sub\u003e\u003c/del\u003e\n\u003cdel\u003ecalendar\u003csub\u003eadd\u003c/sub\u003e\u003c/del\u003e\n\u003cdel\u003ebattery\u003csub\u003ebolt\u003c/sub\u003e\u003c/del\u003e\n\u003cdel\u003efile\u003csub\u003emarkdown\u003c/sub\u003e\u003c/del\u003e\n\u003cdel\u003ecall\u003csup\u003erightward\u003c/sup\u003e\u003c/del\u003e\n\u003cdel\u003edrive\u003csub\u003ewrench\u003c/sub\u003e\u003c/del\u003e\n\u003cdel\u003escreen\u003csub\u003ecolors\u003c/sub\u003e\u003c/del\u003e\n\u003cdel\u003epicture\u003csub\u003econtrast\u003c/sub\u003e\u003c/del\u003e\n```\n\n[Live Demo](https://codepen.io/qxc32034/pen/PopoOzZ)\n\n# HTML text element\n\nAs opposed to SVG, ligatured font can be used in text-only elements (`\u003coption\u003e`, `\u003cinput\u003e` ...):\n\n```html\n\u003cinput type=reset class=picon value=cross\u003e\n\n\u003cselect\u003e\n\t\u003coptgroup label=iconless\u003e\n\t\t\u003coption\u003ewifi0\n\t\u003c/optgroup\u003e\n\t\u003coptgroup class=picon label=\"wifi0\"\u003e\n\t\t\u003coption\u003ewifi0\n\t\t\u003coption\u003ewifi4\n\t\u003c/optgroup\u003e\n\u003c/select\u003e\n```\n\n[Live Demo](https://codepen.io/qxc32034/pen/zYZYPra)\n\n# Pseudo-element\n\nFont can react from states and attributes.\n\nFor example it can automatically display the corresponding language icon to a `\u003cpre\u003e` element:\n\n```html\n\u003cpre lang=js\u003e\nfunction example(){\n\treturn 0;\n}\n\u003c/pre\u003e\n\n\u003cstyle\u003e\npre[lang]::before{\n\tfont-family: picon;\n\tcontent: attr(lang);\n\tfloat: right;\n}\n\u003c/style\u003e\n```\n\n[Live Demo](https://codepen.io/qxc32034/pen/XWMWzWE)\n\nIt can also help to unify browser style for input typefile/checkbox/radio:\n\n```html\n\u003cinput type=file data-before=file style=width:1em\u003e\n\u003cinput type=checkbox data-before=ballot data-before-checked=checked style=appearance:none\u003e\n\u003cinput type=radio data-before=false data-before-checked=true style=appearance:none\u003e\n\u003cstyle\u003e\n[data-before]::before{\n\tfont-family: picon;\n\tcontent: attr(data-before);\n}\n[data-before-checked]:checked::before{\n\tfont-family: picon;\n\tcontent: attr(data-before-checked);\n}\n\u003c/style\u003e\n```\n\n[Live Demo](https://codepen.io/qxc32034/pen/wvJvrVM)\n\n# Color gradient\n\n```html\n\u003cstyle\u003e\n.rainbow{\n\tbackground: linear-gradient(\n\t#5eb544 00.0% 37.5%,\n\t#f5b226 37.5% 50.0%,\n\t#ed7e1e 50.0% 62.5%,\n\t#d9383c 62.5% 75.0%,\n\t#913b92 75.0% 87.5%,\n\t#0098d5 87.5% 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n}\n\u003cstyle\u003e\n\u003cinput type=search class=\"picon rainbow\"\u003e\n```\n\n[Live Demo](https://codepen.io/qxc32034/pen/ZEeEXNX)\n\n# Animation\n\nAdd a hourglass spinner to any disabled button\n\n```html\n\u003cstyle\u003e\n@font-face {\n  src: url(https://unpkg.com/picon);\n  font-family: picon;\n}\n@keyframes hourglass {\n\t0%{content:'hourglass1'}\n\t10%{content:'hourglass2'}\n\t20%{content:'hourglass3'}\n\t30%{content:'hourglass4'}\n\t40%{content:'hourglass5'}\n\t50%{content:'hourglass5'}\n\t60%{content:'hourglass6'}\n\t70%{content:'hourglass7'}\n\t80%{content:'hourglass8'}\n}\nbutton:disabled::after{\n\tfont-family: picon;\n\tcontent: 'hourglass1';\n\tanimation: hourglass 1s infinite;\n}\n\u003c/style\u003e\n\u003cbutton onclick=\"disabled=true\"\u003eUpload\u003c/button\u003e\n```\n\n[Live Demo](https://codepen.io/qxc32034/pen/yLMLzwb)\n\n\u003e Note: `::before` and `::after` pseudo-element only work on HTML elements that accept children (`\u003cinput\u003e` with `type` set to `text`,`button`)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyne%2Fpicon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyne%2Fpicon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyne%2Fpicon/lists"}