Pepicons: Retro Icon Set now available for Designers and Coders
I’ve always been a fan of the Pop Art aesthetic of the 1980s. I love the neon and pastel colors. The bubblegum! The milkshakes! The hairspray!
I was never able to experience this cultural phenomena first hand because I was born in the 90s, but with the aid of the internet, I’m able to relive some of the missed glory.
So with Retro on my mind and Poolside FM on the radio, I set out to design an icon set — a love letter to the days I never got to live!
The all new Retro Icon Set
Pepicons is a grand total of 118 hand-crafted icons — and counting!!!
It’s a completely original icon set made in two retro variants: Pop! and Print ❏
Pop!
Pop gives you the bubblegum feeling — colorful and round, and gives your websites just the right amount of pop! Works great on dark backgrounds as well. Think Rick James, Duran Duran and “Pop! goes my heart” distilled into one hip package!
Print ❏
Hot off the press! Somehow the color is never aligned, but this makes it that much hotter! Think Keith Haring, Andy Warhol and Knight Rider combined into a sleek set!
On Naming Things
As with most icon sets, each icon has a unique Name. With Pepicons, I have chosen that Name to represent what you actually see as opposed to an expected use. An example:
While the Gear icon is often used for settings, it resembles a gear and therefore is named Gear. However, on the pepicons.com website you can find it even when you type “settings” in the search box.
The Plus icon is often used for add or new. However, the icon looks like a plus so I chose its name to be Plus! With Material icons you have to use the names Settings and Add, which I find counter intuitive.
I settled on a what-you-see-is-what-you-get naming scheme is because it’s way easier on your mind. I also believe how you use an icon widely differs based on perspective and culture. Example: with a website where a plus icon is used to expand things, it is very confusing to have an icon called “add” in your HTML code…
Visit Pepicons.com and start retro’ifying your site right away!
I have a few more treats:
Treats for Designers
- You can easily download any icon as SVG or PNG or the entire icon set in SVGs.
- Since I’m a coder by day and only design casually, I’d love to know how I could make this icon set more designer-friendly! Let me know. 😉
Treats for Coders
- You can easily copy the SVG code of any icon to chuck it straight into your HTML.
- There’s a Vue library that makes it really easy to use any icon via a
<Pepicon />Vue component! - There’s also a TS library that can retrieve any icon’s SVG code as string.
Cannot find an icon you need?
Open an issue on Github to request a new icon!
That’s all for now.
Enjoy and stay cool! 😎🏝️
-Luca Ban
