cycraft/pepicons

🥤 An awesome icon pack of retro icons for your apps and websites.

🥤 Pepicons

Pepicons is an icon-set of around five hundred (and counting) retro icons inspired by the 80's. Every icon available in 2 variants: Pop! and Print ❏

Website & icons

pepicons.com

pepicons (TypeScript & SVGs)

See packages/pepicons

@pepicons/vue (Vue 3)

See packages/vue

Motivation

Check out this blog post to understand our motivation for creating Pepicons:

• English: Pepicons: Retro Icon Set now available for Designers and Coders
• Japanese: Pepicons: 80 年代好きにはたまらないアイコンセットが登場

Contribution

In order to do anything you'll need to build the repo once:

npm i
npm run build

Then you can run the dev server:

npm run dev

Check Package.json for more scripts.

License

For commercial use please purchase a License at: https://github.com/sponsors/mesqueeb?frequency=one-time

This icon set falls under CREATIVE COMMONS ATTRIBUTION 4.0 INTERNATIONAL LICENSE.

You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.

See the full LICENSE details at LICENSE.

pepicons's Issues

fix(sketch): print shadow opacity layer

All print icons in Sketch need to have the "shadow" layer grouped with an opacity of 0.8 to that group

feat(docs): popup card UI & logic

list

requested icon

list

category suggestion

UI

search synonyms

to-do, todo, items, sort, organise, organize, tasks, sheet, entries, register, directory, catalogue, inventory, index, checklist, table

better source of truth for synonyms

• better source of truth for synonyms
• add error as synonym to exclamation-mark

feat(docs): Search bar

Search bar with filtering logic to filter the icons

feat(pepicons): did you mean? in error message

if the icon does not exist, include "did you mean ...?" in the error message thrown

implement svgo in the node pipeline

https://github.com/svg/svgo

what I used in Sketch:

{
  "comment": "This is the settings file for the SVGO Compressor Plugin. For more info, please check <https://github.com/BohemianCoding/svgo-compressor>",
  "pretty": false,
  "indent": 2,
  "floatPrecision": 3,
  "plugins": [
    {
      "name": "removeDoctype",
      "enabled": true
    },
    {
      "name": "removeXMLProcInst",
      "enabled": true
    },
    {
      "name": "removeComments",
      "enabled": true
    },
    {
      "name": "removeMetadata",
      "enabled": true
    },
    {
      "name": "removeXMLNS",
      "enabled": false
    },
    {
      "name": "removeEditorsNSData",
      "enabled": true
    },
    {
      "name": "cleanupAttrs",
      "enabled": false
    },
    {
      "name": "inlineStyles",
      "enabled": false
    },
    {
      "name": "minifyStyles",
      "enabled": true
    },
    {
      "name": "convertStyleToAttrs",
      "enabled": true
    },
    {
      "name": "cleanupIDs",
      "enabled": true
    },
    {
      "name": "prefixIds",
      "enabled": false
    },
    {
      "name": "removeRasterImages",
      "enabled": false
    },
    {
      "name": "removeUselessDefs",
      "enabled": true
    },
    {
      "name": "cleanupNumericValues",
      "enabled": true
    },
    {
      "name": "cleanupListOfValues",
      "enabled": true
    },
    {
      "name": "convertColors",
      "enabled": true
    },
    {
      "name": "removeUnknownsAndDefaults",
      "enabled": true
    },
    {
      "name": "removeNonInheritableGroupAttrs",
      "enabled": true
    },
    {
      "name": "removeUselessStrokeAndFill",
      "enabled": true
    },
    {
      "name": "removeViewBox",
      "enabled": false
    },
    {
      "name": "cleanupEnableBackground",
      "enabled": false
    },
    {
      "name": "removeHiddenElems",
      "enabled": true
    },
    {
      "name": "removeEmptyText",
      "enabled": true
    },
    {
      "name": "convertShapeToPath",
      "enabled": true
    },
    {
      "name": "moveElemsAttrsToGroup",
      "enabled": false
    },
    {
      "name": "moveGroupAttrsToElems",
      "enabled": false
    },
    {
      "name": "collapseGroups",
      "enabled": true
    },
    {
      "name": "convertPathData",
      "enabled": true
    },
    {
      "name": "convertTransform",
      "enabled": true
    },
    {
      "name": "removeEmptyAttrs",
      "enabled": true
    },
    {
      "name": "removeEmptyContainers",
      "enabled": true
    },
    {
      "name": "mergePaths",
      "enabled": true
    },
    {
      "name": "removeUnusedNS",
      "enabled": true
    },
    {
      "name": "sortAttrs",
      "enabled": true
    },
    {
      "name": "removeTitle",
      "enabled": true
    },
    {
      "name": "removeDesc",
      "enabled": true,
      "params": {
        "removeAny": true
      }
    },
    {
      "name": "removeDimensions",
      "enabled": false
    },
    {
      "name": "removeAttrs",
      "enabled": false
    },
    {
      "name": "removeAttributesBySelector",
      "enabled": false
    },
    {
      "name": "removeElementsByAttr",
      "enabled": false
    },
    {
      "name": "addClassesToSVGElement",
      "enabled": false
    },
    {
      "name": "removeStyleElement",
      "enabled": false
    },
    {
      "name": "removeScriptElement",
      "enabled": false
    },
    {
      "name": "addAttributesToSVGElement",
      "enabled": false
    },
    {
      "name": "removeOffCanvasPaths",
      "enabled": false
    },
    {
      "name": "reusePaths",
      "enabled": false
    }
  ]
}

hash

requested icon

hash

category suggestion

ui

search synonyms

hashtag, tag, pound-key

feat(vue-pepicons): add vue-intellisense

feat(docs): add footer

sort

requested icon

sort

category suggestion

ui

search synonyms

order, arrows, arrange, organise, organize, rate, tabulate

feat(pepicons.com): make cursor use "open" icon on hover external links

Make the cursor use the pepicon for open when hovering over an external link.

guide:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#formal_syntax

try to use just an SVG or a PNG. (perhaps look into .cur image format)

The icon should be the pop or print icon depending on the user selection.

icons

notes

don't grab these images from the ticket. Just use the actual SVG or PNG from the source code.

time related icons

requested icon

"countdown / timer" タイマー
"stopwatch" ストップウォッチ
"alarm" アラームクロック
"hourglass / sandglass" 砂時計
"wrist-watch" 腕時計
"turn back time" 時間を戻す

add person

requested icon

add-person

category suggestion

social

search synonyms

same synonyms as "person" and "plus"

feat(docs): add size toggle

I imagine a button you can click multiple times which toggles between sizes:

              Size
[ sm ] / [ md ] / [ lg ] / [ xl ]

chain (link, url)

requested icon

chain

category suggestion

UI

search synonyms

link, url, anchor, open, website, shackle, connect, bond, bind, joint, knot

arrow

requested icon

arrow:

• arrow-up
• arrow-down
• arrow-left
• arrow-right
• arrow-up-left
• arrow-up-right
• arrow-down-left
• arrow-down-right

category suggestion

ui

search synonyms

point, bolt, dart, compass, direction, needle, orientation

• arrow-left only: previous, back, before
• arrow-right only: next, after

feat: add search term to URL

in order to be able to share whatever's being searched with someone, it'd be cool if the search term is reflected in the URL at all times.

feat(pepicons.com): focus search on keystroke of /

when there is nothing focussed already (no input or button) (can check with document.activeElement)

then hitting the / key should focus the search input and potentially scroll to it if it's not in view

thumbs up / down

requested icon

thumbs-up
thumbs-down

category suggestion

Social

search synonyms

like, love, vote, upvote, gesture, favorite, favourite
dislike, hate, vote, downvote, gesture, block

feat(docs): add sponsor banner [2h]

like egoist, but way more pretty:
https://vue-feather-icons.egoist.sh/

[atom] header [8h]

refactor: rewrite build files with TypeScript & fs-extra

I want to refactor the build folder to be typescript and use less dependencies.

• research good libraries that are more powerful than native FS with handy functions, and typescript support.

I probably wanna go with fs-extra.
But need to check if there is any other similar library that's even better/more popular/well maintained than fs-extra. If not, fs-extra is OK.

• replace functions from imported libraries with fs-extra functions where possible (biggest part of this task)

I think it's mainly gonna be these three functions that can be replaced: copyfiles, renamer, rimraf.
And perhaps: replace-in-file but I don't think there's functionality like this in fs-extra.

The benefit of fs-extra is that they automatically promisify stuff where I'm manually promisifying stuff in my current code. However, since this script needs to run synchronous anyway, try to use the sync functions wherever possible (await not even required in this case I believe).

I hope that the original usage of copyfiles, renamer, rimraf will be simplified and streamlined with fs-extra.

• install the typescript types for fs-extra (check their readme) and see if other remaining functions have installable types, (like replace-in-file)
• at this point rename all .js files to .ts
• replace module.exports with ESM default export
• replace exports.something with ESM named export
• replace require('...')with import '...' wherever possible
• add missing type information wherever prompted by TS or VSCode
• install ts-node as root dev dep
• replace "prepare-pepicons": "node ./build/preparePepicons.js", with "prepare-pepicons": "ts-node ./build/preparePepicons.js",
• execute npm run prepare-pepicons and make sure it's 100% the same result as before all these changes.

Add pepicons.com link to cycraft.co

feat(docs): write short text for between header & controls

issue with multi line names

see the two little dots, they're from the word that's being overflowed hidden

crown

requested icon

crown

category suggestion

item

search synonyms

coronet, diadem, tiara, circlet, title, award, accolade, honor, honour, distinction, glory, kudos, trophy, cup, medal, monarch, sovereign, king, queen, emperor, empress

feat(docs): add Github / About Us / Download buttons

fix(pepicons.com): iPhone SE tweaks

currently on iPhone SE:

make CSS tweaks that you feel improve the UI.

there is no design file, so try and play around with the CSS by eye until you think it looks better : )

QR code

requested icon

qr-code

category suggestion

UI

search synonyms

bar-code, barcode, scan

feat(vue-pepicons): add -square wrap

might be cool to have the ability to make any icon easily renderable as icon like these:

megaphone

requested icon

megaphone

category suggestion

item

search synonyms

public-speaker, speech, lecture, yell, shout, announce, broadcast, proclaim, disclose

Magnet

requested icon

A magnet
Based on the magnet emoji 🧲 but stylized your way, and maybe with the opening at the top? I'd like to use it for my Magnetize PopClip extension. Thanks!

category suggestion

Item

search synonyms

magnet, magnetize, attract, attraction, repel, repulsion

feat(docs): [atom] about us card

label

requested icon

label

category suggestion

ui

search synonyms

tag, flag, ticket, badge

Create small section on the pop clip "name that color" extension

The Pepicon colour picker was used for this extension:

also see:

pilotmoon/PopClip-Extensions#1141

• Design a small section on this pop clip "name that color" extension on the Pepicons LP. ( @asukit16 )

leave / enter

requested icon

leave / enter

category suggestion

ui

search synonyms

• leave -- logout, log-out, sign-out, signout, stop, depart, retire, withdraw, exit, abandon, quit, resign, retire, gone
• enter -- login, log-in, signin, sign-in, join, embark, start, begin, into, enlist, entrance, submit, advance, register

convert Sketch to Figma

I did some research on how to best convert sketch to figma
this is what I should do:

things to do in Sketch

• flatten all unions
• group flattened union layer(s) as folder called "source"
• duplicate "source" folder as "outline"
• outline all flattened unions and delete unused data from the outlined result

things to do in Figma

• re-hide all folders called "source"

photo

requested icon

photo

category suggestion

item

search synonyms

photograph, picture, shot, snap, image, camera-roll

clear input icon

Should determine if needed or not depending on:
#46

requested icon

the round clear input icon: ☒

icon name synonyms

clear, delete, remove, stop

feat(vue-pepicons): add rotation prop

feat(docs): make it possible to copy Vue code! [6h]

I want something similar to:

https://vue-feather-icons.egoist.sh/

But still thinking about the best way to include this without it being in the way of designers etc.

Also, the code should automatically have the props based on the selected params on the website!

trophy

requested icon

trophy

category suggestion

item

search synonyms

cup, medal, prize, award, accolade, honour, distinction, glory, kudos, holy-grail

person-checkmark

requested icon

person-checkmark

category suggestion

social

search synonyms

following

identification

requested icon

category suggestion

item

search synonyms

id, papers, identity, bona fides, credentials, id-card, pass, badge, warrant, licence, permit, passport, proof-of-identity, certificate, diploma

feat(vue): implement tree-shaken icons & async import

• update the scripts to auto generate each Pepicon as a vue with the SVG code & support for the same props we use for Pepicon.vue currently
• Note: You'll have to have a look around here:
  https://github.com/cycraft/pepicons/blob/1f203788dd6c045782740551ba2721b9be72cb4e/scripts/generateSvgStrings.js/#L217
• update the Pepicon vue file to use these async Pepicon vue files instead of the current implementation
• Note: feel free to make big architectural changes for the sake of improving / organising the codebase
• Note: feel free to convert the .js files in scripts to .ts and execute through esbuild register.

feat(docs): about us section

Add the about us section with the cards and have it scroll to this section when "about us" is clicked

2 persons / 3 persons

requested icon

persons

people

category suggestion

social

search synonyms

same synonyms as person
and also:

• persons only: 2-persons, 2-people, pair, partnership, couple, duo, duplet
• people only: 3-persons, 3-people, group, following, crowd, band, gathering, company, assembly, association, club, society, guild, league, union, mass, triplet

feat(docs): think about showing icons per group

under the hood, every icon belongs to a "group" like "food & drinks" / "transport" / ...

Need to think how to bring this into the landing page.

paste hex in color picker

you can't paste a hex in the color picker without alpha channel.