diff --git a/NOTICE.md b/NOTICE.md index 0468271c9..8b3884fd6 100644 --- a/NOTICE.md +++ b/NOTICE.md @@ -9,3 +9,21 @@ The `skill/reference/ios.md` and `skill/reference/android.md` platform reference **Original work:** https://github.com/ehmo/platform-design-skills **Original license:** MIT **Author:** ehmo + +## Icon specimens in the design picker + +`picker/data/icon-packs.json`, and the copy of it built into `skill/scripts/picker/`, holds twenty-four glyphs from each of the icon families the picker offers, redistributed unmodified apart from the removal of attributes the specimen does not draw with. They are shown so a user can compare the families and choose one; the choice, not this file, is what a project then installs. `scripts/vendor-icons.mjs` records the exact version each set was taken from. + +| Set | License | Source | +|---|---|---| +| Lucide | ISC | https://github.com/lucide-icons/lucide | +| Feather | MIT | https://github.com/feathericons/feather | +| Phosphor | MIT | https://github.com/phosphor-icons/core | +| Heroicons | MIT | https://github.com/tailwindlabs/heroicons | +| Tabler | MIT | https://github.com/tabler/tabler-icons | +| Radix Icons | MIT | https://github.com/radix-ui/icons | +| Bootstrap Icons | MIT | https://github.com/twbs/icons | +| Iconoir | MIT | https://github.com/iconoir-icons/iconoir | +| Octicons | MIT | https://github.com/primer/octicons | +| Hugeicons (free core) | MIT | https://github.com/hugeicons/hugeicons-react | +| Remix Icon | Apache-2.0 | https://github.com/Remix-Design/RemixIcon | diff --git a/picker/data/icon-packs.json b/picker/data/icon-packs.json new file mode 100644 index 000000000..11caacc00 --- /dev/null +++ b/picker/data/icon-packs.json @@ -0,0 +1 @@ +{"generated":"2026-07-26","concepts":["home","search","user","settings","bell","heart","star","calendar","mail","message","trash","download","upload","plus","check","close","chevron-right","arrow-right","menu","filter","edit","lock","eye","external-link"],"packs":[{"id":"lucide","name":"Lucide","license":"ISC","url":"https://lucide.dev","note":"Feather’s successor. Same 2px round-cap hand, far wider catalog, still shipping.","grid":"24","weight":"2px stroke","count":2007,"version":"1.27.0","viewBox":"0 0 24 24","attrs":{"fill":"none","stroke":"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},"glyphs":[{"concept":"home","name":"home","body":""},{"concept":"search","name":"search","body":""},{"concept":"user","name":"user","body":""},{"concept":"settings","name":"settings","body":""},{"concept":"bell","name":"bell","body":""},{"concept":"heart","name":"heart","body":""},{"concept":"star","name":"star","body":""},{"concept":"calendar","name":"calendar","body":""},{"concept":"mail","name":"mail","body":""},{"concept":"message","name":"message-circle","body":""},{"concept":"trash","name":"trash-2","body":""},{"concept":"download","name":"download","body":""},{"concept":"upload","name":"upload","body":""},{"concept":"plus","name":"plus","body":""},{"concept":"check","name":"check","body":""},{"concept":"close","name":"x","body":""},{"concept":"chevron-right","name":"chevron-right","body":""},{"concept":"arrow-right","name":"arrow-right","body":""},{"concept":"menu","name":"menu","body":""},{"concept":"filter","name":"filter","body":""},{"concept":"edit","name":"pencil","body":""},{"concept":"lock","name":"lock","body":""},{"concept":"eye","name":"eye","body":""},{"concept":"external-link","name":"external-link","body":""}]},{"id":"feather","name":"Feather","license":"MIT","url":"https://feathericons.com","note":"The 2px original most stroke sets descend from. Small, even, no longer growing.","grid":"24","weight":"2px stroke","count":287,"version":"4.29.2","viewBox":"0 0 24 24","attrs":{"fill":"none","stroke":"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},"glyphs":[{"concept":"home","name":"home","body":""},{"concept":"search","name":"search","body":""},{"concept":"user","name":"user","body":""},{"concept":"settings","name":"settings","body":""},{"concept":"bell","name":"bell","body":""},{"concept":"heart","name":"heart","body":""},{"concept":"star","name":"star","body":""},{"concept":"calendar","name":"calendar","body":""},{"concept":"mail","name":"mail","body":""},{"concept":"message","name":"message-circle","body":""},{"concept":"trash","name":"trash-2","body":""},{"concept":"download","name":"download","body":""},{"concept":"upload","name":"upload","body":""},{"concept":"plus","name":"plus","body":""},{"concept":"check","name":"check","body":""},{"concept":"close","name":"x","body":""},{"concept":"chevron-right","name":"chevron-right","body":""},{"concept":"arrow-right","name":"arrow-right","body":""},{"concept":"menu","name":"menu","body":""},{"concept":"filter","name":"filter","body":""},{"concept":"edit","name":"edit-3","body":""},{"concept":"lock","name":"lock","body":""},{"concept":"eye","name":"eye","body":""},{"concept":"external-link","name":"external-link","body":""}]},{"id":"phosphor","name":"Phosphor","license":"MIT","url":"https://phosphoricons.com","note":"Drawn on a 256 grid with a soft geometric hand. Six weights upstream, regular here.","grid":"256","weight":"regular weight","count":1512,"version":"2.1.1","viewBox":"0 0 256 256","attrs":{"fill":"currentColor"},"glyphs":[{"concept":"home","name":"house","body":""},{"concept":"search","name":"magnifying-glass","body":""},{"concept":"user","name":"user","body":""},{"concept":"settings","name":"gear-six","body":""},{"concept":"bell","name":"bell","body":""},{"concept":"heart","name":"heart","body":""},{"concept":"star","name":"star","body":""},{"concept":"calendar","name":"calendar","body":""},{"concept":"mail","name":"envelope","body":""},{"concept":"message","name":"chat-circle","body":""},{"concept":"trash","name":"trash","body":""},{"concept":"download","name":"download","body":""},{"concept":"upload","name":"upload","body":""},{"concept":"plus","name":"plus","body":""},{"concept":"check","name":"check","body":""},{"concept":"close","name":"x","body":""},{"concept":"chevron-right","name":"caret-right","body":""},{"concept":"arrow-right","name":"arrow-right","body":""},{"concept":"menu","name":"list","body":""},{"concept":"filter","name":"funnel","body":""},{"concept":"edit","name":"pencil","body":""},{"concept":"lock","name":"lock","body":""},{"concept":"eye","name":"eye","body":""},{"concept":"external-link","name":"arrow-square-out","body":""}]},{"id":"heroicons","name":"Heroicons","license":"MIT","url":"https://heroicons.com","note":"Tailwind’s set. 1.5px strokes at 24, with solid and 20px mini twins for dense UI.","grid":"24","weight":"1.5px stroke","count":324,"version":"2.2.0","viewBox":"0 0 24 24","attrs":{"fill":"none","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},"glyphs":[{"concept":"home","name":"home","body":""},{"concept":"search","name":"magnifying-glass","body":""},{"concept":"user","name":"user","body":""},{"concept":"settings","name":"cog","body":""},{"concept":"bell","name":"bell","body":""},{"concept":"heart","name":"heart","body":""},{"concept":"star","name":"star","body":""},{"concept":"calendar","name":"calendar","body":""},{"concept":"mail","name":"envelope","body":""},{"concept":"message","name":"chat-bubble-left","body":""},{"concept":"trash","name":"trash","body":""},{"concept":"download","name":"arrow-down-tray","body":""},{"concept":"upload","name":"arrow-up-tray","body":""},{"concept":"plus","name":"plus","body":""},{"concept":"check","name":"check","body":""},{"concept":"close","name":"x-mark","body":""},{"concept":"chevron-right","name":"chevron-right","body":""},{"concept":"arrow-right","name":"arrow-right","body":""},{"concept":"menu","name":"bars-3","body":""},{"concept":"filter","name":"funnel","body":""},{"concept":"edit","name":"pencil","body":""},{"concept":"lock","name":"lock-closed","body":""},{"concept":"eye","name":"eye","body":""},{"concept":"external-link","name":"arrow-top-right-on-square","body":""}]},{"id":"tabler","name":"Tabler","license":"MIT","url":"https://tabler.io/icons","note":"The widest stroke catalog here, uniform enough that mixed rows read as one hand.","grid":"24","weight":"2px stroke","count":5112,"version":"3.45.0","viewBox":"0 0 24 24","attrs":{"fill":"none","stroke":"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},"glyphs":[{"concept":"home","name":"home","body":""},{"concept":"search","name":"search","body":""},{"concept":"user","name":"user","body":""},{"concept":"settings","name":"settings","body":""},{"concept":"bell","name":"bell","body":""},{"concept":"heart","name":"heart","body":""},{"concept":"star","name":"star","body":""},{"concept":"calendar","name":"calendar","body":""},{"concept":"mail","name":"mail","body":""},{"concept":"message","name":"message-circle","body":""},{"concept":"trash","name":"trash","body":""},{"concept":"download","name":"download","body":""},{"concept":"upload","name":"upload","body":""},{"concept":"plus","name":"plus","body":""},{"concept":"check","name":"check","body":""},{"concept":"close","name":"x","body":""},{"concept":"chevron-right","name":"chevron-right","body":""},{"concept":"arrow-right","name":"arrow-right","body":""},{"concept":"menu","name":"menu-2","body":""},{"concept":"filter","name":"filter","body":""},{"concept":"edit","name":"pencil","body":""},{"concept":"lock","name":"lock","body":""},{"concept":"eye","name":"eye","body":""},{"concept":"external-link","name":"external-link","body":""}]},{"id":"radix","name":"Radix Icons","license":"MIT","url":"https://www.radix-ui.com/icons","note":"A 15px grid built for product chrome. Crisp at control size, thin if you scale it up.","grid":"15","weight":"filled paths","count":332,"version":"112af91ad275a63c3a29b0da2588342af74ef9bf","viewBox":"0 0 15 15","attrs":{"fill":"none"},"glyphs":[{"concept":"home","name":"home","body":""},{"concept":"search","name":"magnifying-glass","body":""},{"concept":"user","name":"person","body":""},{"concept":"settings","name":"gear","body":""},{"concept":"bell","name":"bell","body":""},{"concept":"heart","name":"heart","body":""},{"concept":"star","name":"star","body":""},{"concept":"calendar","name":"calendar","body":""},{"concept":"mail","name":"envelope-closed","body":""},{"concept":"message","name":"chat-bubble","body":""},{"concept":"trash","name":"trash","body":""},{"concept":"download","name":"download","body":""},{"concept":"upload","name":"upload","body":""},{"concept":"plus","name":"plus","body":""},{"concept":"check","name":"check","body":""},{"concept":"close","name":"cross-1","body":""},{"concept":"chevron-right","name":"chevron-right","body":""},{"concept":"arrow-right","name":"arrow-right","body":""},{"concept":"menu","name":"hamburger-menu","body":""},{"concept":"filter","name":"mixer-horizontal","body":""},{"concept":"edit","name":"pencil-1","body":""},{"concept":"lock","name":"lock-closed","body":""},{"concept":"eye","name":"eye-open","body":""},{"concept":"external-link","name":"external-link","body":""}]},{"id":"bootstrap","name":"Bootstrap Icons","license":"MIT","url":"https://icons.getbootstrap.com","note":"Filled paths on a 16 grid, so weight holds at any size. More literal than the stroke sets.","grid":"16","weight":"filled paths","count":1408,"version":"1.13.1","viewBox":"0 0 16 16","attrs":{"fill":"currentColor"},"glyphs":[{"concept":"home","name":"house","body":""},{"concept":"search","name":"search","body":""},{"concept":"user","name":"person","body":""},{"concept":"settings","name":"gear","body":""},{"concept":"bell","name":"bell","body":""},{"concept":"heart","name":"heart","body":""},{"concept":"star","name":"star","body":""},{"concept":"calendar","name":"calendar","body":""},{"concept":"mail","name":"envelope","body":""},{"concept":"message","name":"chat","body":""},{"concept":"trash","name":"trash","body":""},{"concept":"download","name":"download","body":""},{"concept":"upload","name":"upload","body":""},{"concept":"plus","name":"plus","body":""},{"concept":"check","name":"check","body":""},{"concept":"close","name":"x","body":""},{"concept":"chevron-right","name":"chevron-right","body":""},{"concept":"arrow-right","name":"arrow-right","body":""},{"concept":"menu","name":"list","body":""},{"concept":"filter","name":"funnel","body":""},{"concept":"edit","name":"pencil","body":""},{"concept":"lock","name":"lock","body":""},{"concept":"eye","name":"eye","body":""},{"concept":"external-link","name":"box-arrow-up-right","body":""}]},{"id":"iconoir","name":"Iconoir","license":"MIT","url":"https://iconoir.com","note":"1.5px strokes on 24 with an open, geometric hand. Roomier than Lucide at the same size.","grid":"24","weight":"1.5px stroke","count":1383,"version":"7.11.1","viewBox":"0 0 24 24","attrs":{"fill":"none","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},"glyphs":[{"concept":"home","name":"home","body":""},{"concept":"search","name":"search","body":""},{"concept":"user","name":"user","body":""},{"concept":"settings","name":"settings","body":""},{"concept":"bell","name":"bell","body":""},{"concept":"heart","name":"heart","body":""},{"concept":"star","name":"star","body":""},{"concept":"calendar","name":"calendar","body":""},{"concept":"mail","name":"mail","body":""},{"concept":"message","name":"chat-bubble","body":""},{"concept":"trash","name":"trash","body":""},{"concept":"download","name":"download","body":""},{"concept":"upload","name":"upload","body":""},{"concept":"plus","name":"plus","body":""},{"concept":"check","name":"check","body":""},{"concept":"close","name":"xmark","body":""},{"concept":"chevron-right","name":"nav-arrow-right","body":""},{"concept":"arrow-right","name":"arrow-right","body":""},{"concept":"menu","name":"menu","body":""},{"concept":"filter","name":"filter","body":""},{"concept":"edit","name":"edit-pencil","body":""},{"concept":"lock","name":"lock","body":""},{"concept":"eye","name":"eye","body":""},{"concept":"external-link","name":"open-new-window","body":""}]},{"id":"octicons","name":"Octicons","license":"MIT","url":"https://primer.style/octicons","note":"GitHub’s set, redrawn per size rather than scaled. Compact and developer-fluent.","grid":"24","weight":"filled paths","count":350,"version":"19.31.0","viewBox":"0 0 24 24","attrs":{"fill":"currentColor"},"glyphs":[{"concept":"home","name":"home-24","body":""},{"concept":"search","name":"search-24","body":""},{"concept":"user","name":"person-24","body":""},{"concept":"settings","name":"gear-24","body":""},{"concept":"bell","name":"bell-24","body":""},{"concept":"heart","name":"heart-24","body":""},{"concept":"star","name":"star-24","body":""},{"concept":"calendar","name":"calendar-24","body":""},{"concept":"mail","name":"mail-24","body":""},{"concept":"message","name":"comment-24","body":""},{"concept":"trash","name":"trash-24","body":""},{"concept":"download","name":"download-24","body":""},{"concept":"upload","name":"upload-24","body":""},{"concept":"plus","name":"plus-24","body":""},{"concept":"check","name":"check-24","body":""},{"concept":"close","name":"x-24","body":""},{"concept":"chevron-right","name":"chevron-right-24","body":""},{"concept":"arrow-right","name":"arrow-right-24","body":""},{"concept":"menu","name":"three-bars-24","body":""},{"concept":"filter","name":"filter-24","body":""},{"concept":"edit","name":"pencil-24","body":""},{"concept":"lock","name":"lock-24","body":""},{"concept":"eye","name":"eye-24","body":""},{"concept":"external-link","name":"link-external-24","body":""}]},{"id":"hugeicons","name":"Hugeicons","license":"MIT (free core)","url":"https://hugeicons.com","note":"1.5px rounded strokes on 24. The free core is one style; the other styles are paid.","grid":"24","weight":"1.5px stroke","count":5443,"version":"4.2.3","viewBox":"0 0 24 24","attrs":{"fill":"none","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},"glyphs":[{"concept":"home","name":"Home01Icon","body":""},{"concept":"search","name":"Search01Icon","body":""},{"concept":"user","name":"UserIcon","body":""},{"concept":"settings","name":"Settings01Icon","body":""},{"concept":"bell","name":"Notification01Icon","body":""},{"concept":"heart","name":"FavouriteIcon","body":""},{"concept":"star","name":"StarIcon","body":""},{"concept":"calendar","name":"Calendar01Icon","body":""},{"concept":"mail","name":"Mail01Icon","body":""},{"concept":"message","name":"BubbleChatIcon","body":""},{"concept":"trash","name":"Delete02Icon","body":""},{"concept":"download","name":"Download01Icon","body":""},{"concept":"upload","name":"Upload01Icon","body":""},{"concept":"plus","name":"Add01Icon","body":""},{"concept":"check","name":"Tick02Icon","body":""},{"concept":"close","name":"Cancel01Icon","body":""},{"concept":"chevron-right","name":"ChevronRightIcon","body":""},{"concept":"arrow-right","name":"ArrowRight02Icon","body":""},{"concept":"menu","name":"Menu01Icon","body":""},{"concept":"filter","name":"FilterIcon","body":""},{"concept":"edit","name":"PencilEdit01Icon","body":""},{"concept":"lock","name":"SquareLock01Icon","body":""},{"concept":"eye","name":"ViewIcon","body":""},{"concept":"external-link","name":"ExternalLinkIcon","body":""}]},{"id":"remix","name":"Remix Icon","license":"Apache-2.0","url":"https://remixicon.com","note":"Line and fill twins across a broad catalog. Neutral, a touch heavier than the 2px sets.","grid":"24","weight":"filled paths","count":1539,"version":"4.9.1","viewBox":"0 0 24 24","attrs":{"fill":"currentColor"},"glyphs":[{"concept":"home","name":"home-line","body":""},{"concept":"search","name":"search-line","body":""},{"concept":"user","name":"user-line","body":""},{"concept":"settings","name":"settings-3-line","body":""},{"concept":"bell","name":"notification-2-line","body":""},{"concept":"heart","name":"heart-line","body":""},{"concept":"star","name":"star-line","body":""},{"concept":"calendar","name":"calendar-line","body":""},{"concept":"mail","name":"mail-line","body":""},{"concept":"message","name":"message-line","body":""},{"concept":"trash","name":"delete-bin-line","body":""},{"concept":"download","name":"download-line","body":""},{"concept":"upload","name":"upload-line","body":""},{"concept":"plus","name":"add-line","body":""},{"concept":"check","name":"check-line","body":""},{"concept":"close","name":"close-line","body":""},{"concept":"chevron-right","name":"arrow-right-s-line","body":""},{"concept":"arrow-right","name":"arrow-right-line","body":""},{"concept":"menu","name":"menu-line","body":""},{"concept":"filter","name":"filter-line","body":""},{"concept":"edit","name":"pencil-line","body":""},{"concept":"lock","name":"lock-line","body":""},{"concept":"eye","name":"eye-line","body":""},{"concept":"external-link","name":"external-link-line","body":""}]}]} diff --git a/picker/pages/index.astro b/picker/pages/index.astro index f1a060608..4564f0c78 100644 --- a/picker/pages/index.astro +++ b/picker/pages/index.astro @@ -2,6 +2,7 @@ import Picker from '../layouts/Picker.astro'; import Artboard from '../components/Artboard.astro'; import QuestionScreen from '../components/QuestionScreen.astro'; +import iconPacks from '../data/icon-packs.json'; const roles = [ ['primary', 'Primary'], @@ -27,6 +28,17 @@ const scales = [ // Exponent above the 16px base: P sits at the base, H1 six steps up. const scaleRows = [['H1', 6], ['H2', 5], ['H3', 4], ['H4', 3], ['H5', 2], ['H6', 1], ['P', 0]]; +// Only the row copy is rendered here. The glyphs are 109KB of markup for sets +// the run will use one of, so they are fetched when the screen first opens. +const iconRows = iconPacks.packs.map((pack) => ({ + id: pack.id, + name: pack.name, + license: pack.license, + url: pack.url, + note: pack.note, + meta: `${pack.grid} grid / ${pack.weight} / ${pack.license}`, +})); + // The five questions that are answered by looking at the same wireframe page. // Each one only rewrites the artboard slots it owns, so by the last screen the // page is showing every decision made before it. Motion is the one question @@ -78,7 +90,7 @@ const questions = [ { value: 'balanced', title: 'Balanced', - desc: 'An aligned grid with a few deliberate breaks in it.', + desc: 'An aligned grid with a few deliberate breaks that carry the emphasis.', }, { value: 'editorial', @@ -593,7 +605,88 @@ const questions = [ {questions.map((question) => )} -