9 ms·

A flat icon set for OS X

110 points by tinalatif 12y ago

S_A_P 12y ago
I like these, but they seem a bit fuzzy to my non retina macbook display. Particularly the music and calendar app icons just seem overly aliased. Can anyone else confirm?
- alexbilbie 12y ago
  Moving the window between my rMBP and 27" Cinema Display I can see the fuzzyness too
- publicfig 12y ago
  They appear to be fuzzy on mine as well. Looks like they were designed for non-retina screens which is a shame.
- tinalatif 12y ago
  They were designed on a retina screen but I'm not sure why that's happening. I'll have a look and see what I can do!
  - dictum 12y ago
    I disabled the width property (width: 12.5%) for the .icon class and the icons look crisp now.
    - tinalatif 12y ago
      Thanks for looking into this!
- antidaily 12y ago
  Seem a little washed out as well.
- Gracana 12y ago
  Did you actually install them? I don't have a mac at work to try them out on, but when I downloaded the zip file it contained large crisp pngs. Maybe they just look fuzzy in the web page preview?
- ntaso 12y ago
  The preview looks fuzzy, because they look like they have a slightly lighter outline, which is some way to do anti-aliasing. The PNGs in the download archive don't have these outlines.
_pmf_ 12y ago
Windows 3.11 HD
- artmageddon 12y ago
  As much of a huge step back in UX that would be, part of me would get a chuckle out of seeing this...
- davidw 12y ago
  Mac isn't bad in the historic flat design department either: https://twitter.com/JonyIveParody/status/486510620276441088/photo/1 https://twitter.com/JonyIveParody/status/486510620276441088/...
kepano 12y ago
Along the same vein: http://appicns.com http://appicns.com
- gerbal 12y ago
  Those are too abstracted, it's hard to figure out what they are icons for. For instance, the Adobe suite icons are impossible to decipher.
- neobaba1289 12y ago
  They are good but I think according to the apple design philosophy the icons are supposed to be in the shape of squares right?
- rangibaby 12y ago
  I like these more because they aren't square. Thanks
netnichols 12y ago
Nice job! Just missing a Facebook icon for my Facebook SSB.
- tinalatif 12y ago
  Coming up soon!
neobaba1289 12y ago
I like them.. They might just get used if OS X goes flat..
TarpitCarnivore 12y ago
I may be in the minority, but these feel really boring and dull to me. I think there is a way to have a "flat" icon while still providing some depth to them. I've also seen dozens and dozens of flat icon sets for Android that basically have this same exact look. Just go to XDA or the Play Store and search "flat icons", I'm sure you'll find a bunch that have a mix of these designs.
- themoonbus 12y ago
  I think one of the main issues for me is the lack of saturation... the color palette is a little pastel.
  - yaeger 12y ago
    Everything looks like it is covered in a thick layer of dust. Looking at these icons makes me want to lick my finger and swish across my screen to remove the dust from those.
- vor_ 12y ago
  One issue I have with many of the flat designs I see posted online is that they're so simplistic and desaturated that they look like cheap, generic clip art. OS X Yosemite's system icons retain appropriate bevels and shadows for distinction and look even better than their iOS 7 counterparts.
jason_slack 12y ago
Thanks for releasing these. I am changing over now! Hoping my dock and icons flow better. Here is my new dock: http://imgur.com/2vEM5Yv http://imgur.com/2vEM5Yv Why the down vote?
- abhinavk 12y ago
  1. You complained about the downvote. 2. Image is low-resolution.
  - jason_slack 12y ago
    so I got downvoted for taking a picture of my exact dock, exact size? So I should have made my dock way larger and posted a better quality picture? All I was doing was telling the author that I liked what she did and showing that I did indeed take time to implement it.
    - tinalatif 12y ago
      For what it's worth, I appreciate it :)
jarrett 12y ago
Philosophically or practically: What's the justification for nearly everyone switching to flat design? Is there any articulable reason it's "better" than the rich, three-dimensional style[1] that was previously popular? Or is it just an arbitrary trend? Some say the change is driven by high-DPI displays. I disagree. I don't see any intrinsic reason that flat designs look better than rich, three-dimensional designs on a high-DPI display. Without a doubt, flat can look nice, but so can things like this: http://www.sequelpro.com/blog/wp-content/uploads/2013/01/sequel-pro-1.0.png http://www.sequelpro.com/blog/wp-content/uploads/2013/01/seq... Another justification I've heard is that it's a reaction to the excesses of the previous trend. People often point to the leather motif in certain Apple applications as an example of such excess. But first of all, those examples are outliers; few designs actually went that far. Second, the existence of a questionable use of a given style is not an effective argument against that style in general. Third, "some things were extremely 3d, so now we'll be extremely flat" seems like contrarianism for contrarianism's sake. [1] Some call this skeuomorphism. I tend not to, because the term technically means something narrower than what we're talking about: http://en.wikipedia.org/wiki/Skeuomorph http://en.wikipedia.org/wiki/Skeuomorph
- ender7 12y ago
  Gradients and juicy-fruit graphics are like candy -- they provide an instant and strong positive feeling, but they don't age well. If you had to eat nothing but candy, you'd hate the sugar-coated morass your mouth had become. In general, a flat icon tends to age better and reduce "eye exhaustion" (not a physiological thing, but a psychological one). Note that this applies mostly just to icons; the entire UI is not so tightly bound by these rules. However, design is also trend-oriented, and flat is a rising trend.
  - jarrett 12y ago
    > but they don't age well...In general, a flat icon tends to age better and reduce "eye exhaustion" Two thoughts on that: 1) Is that just an opinion? (If so, there's obviously nothing wrong with that.) Or is there some objective evidence? 2) How well do icons need to age? Realistically, how many icons in the wild will go 5+ years without a design refresh?
keehun 12y ago
Seems like you can't change the calendar icon. The calendar ICNS is used for the first time after cache reset, but once calendar opens, it uses its own embedded empty calendar icon and fills in the date. Any way for liteicon to change that blank calendar? I noticed you provided the blank calendar icns. I suppose I could open up Calendar and replace it to try it out.
- tinalatif 12y ago
  Oops, good call, calendar has to be done manually a little bit differently. I forgot to add instructions for that - I'll do it tonight
batmansbelt 12y ago
I don't like the firefox one.
reubenmorais 12y ago
Icon sets suck. They aim for system-wide consistency, but can never achieve it, because there are N+1 icons to be replaced. They focus too much on any given design pattern (flat, round squares, dark, etc.), and forget the basics: icons should represent the program, they should be memorable. The only sensible use case for an icon set I can think of is a graphic designer who wants to practice.
- oneeyedpigeon 12y ago
  With you until the last sentence. How about icon sets for those who are colour blind? Whilst I'm sure you could, to some extent, automatically convert, I'm also sure there are nuances that only a human designer could cater for. Also, how about different sets for different nationalities/cultures between whom analogies can vary greatly. It would be nice to solve the N+1 problem with a semantic hierarchy providing fallbacks, particularly in the case when only one application within a specific group is installed.
Vanayad 12y ago
I do not understand this trend of 'flat design'. It looks horrible. It started with Apple and the other copied it. Now microsoft has it, google started implementing it, samsung as well. It looks horrible.
- abhinavk 12y ago
  Well. Microsoft had it first with Windows Phone 7 and Windows 8. But yes it is now everywhere. Latest KDE Plasma release is flat too and other DEs will soon follow suit.
hlfcoding 12y ago
If you want to implement minimalist design, you might as well go the full nine yards and use no more than 2-3 (properly contrasting) colors. This is middle-of-the-road and frankly evokes neither elegance nor brilliance. To elaborate on why the above may be interpreted as harsh, by limiting the ingredients at your disposal to flat colors and simple shapes, you run the risk of amplifying the severity of any mistakes in their selection. The less visual information that get presented, the more the visual units come under closer scrutiny.

110 points by tinalatif 12y ago

S_A_P 12y ago

I like these, but they seem a bit fuzzy to my non retina macbook display. Particularly the music and calendar app icons just seem overly aliased. Can anyone else confirm?

alexbilbie 12y ago
Moving the window between my rMBP and 27" Cinema Display I can see the fuzzyness too
publicfig 12y ago
They appear to be fuzzy on mine as well. Looks like they were designed for non-retina screens which is a shame.
tinalatif 12y ago
They were designed on a retina screen but I'm not sure why that's happening. I'll have a look and see what I can do!
- dictum 12y ago
  I disabled the width property (width: 12.5%) for the .icon class and the icons look crisp now.
  - tinalatif 12y ago
    Thanks for looking into this!
antidaily 12y ago
Seem a little washed out as well.
Gracana 12y ago
Did you actually install them? I don't have a mac at work to try them out on, but when I downloaded the zip file it contained large crisp pngs. Maybe they just look fuzzy in the web page preview?
ntaso 12y ago
The preview looks fuzzy, because they look like they have a slightly lighter outline, which is some way to do anti-aliasing. The PNGs in the download archive don't have these outlines.

_pmf_ 12y ago

Windows 3.11 HD

artmageddon 12y ago
As much of a huge step back in UX that would be, part of me would get a chuckle out of seeing this...
davidw 12y ago
Mac isn't bad in the historic flat design department either: https://twitter.com/JonyIveParody/status/486510620276441088/photo/1 https://twitter.com/JonyIveParody/status/486510620276441088/...

kepano 12y ago

Along the same vein: http://appicns.com http://appicns.com

gerbal 12y ago
Those are too abstracted, it's hard to figure out what they are icons for. For instance, the Adobe suite icons are impossible to decipher.
neobaba1289 12y ago
They are good but I think according to the apple design philosophy the icons are supposed to be in the shape of squares right?
rangibaby 12y ago
I like these more because they aren't square. Thanks

netnichols 12y ago

Nice job! Just missing a Facebook icon for my Facebook SSB.

tinalatif 12y ago
Coming up soon!

neobaba1289 12y ago

I like them.. They might just get used if OS X goes flat..

TarpitCarnivore 12y ago

I may be in the minority, but these feel really boring and dull to me. I think there is a way to have a "flat" icon while still providing some depth to them. I've also seen dozens and dozens of flat icon sets for Android that basically have this same exact look. Just go to XDA or the Play Store and search "flat icons", I'm sure you'll find a bunch that have a mix of these designs.

themoonbus 12y ago
I think one of the main issues for me is the lack of saturation... the color palette is a little pastel.
- yaeger 12y ago
  Everything looks like it is covered in a thick layer of dust. Looking at these icons makes me want to lick my finger and swish across my screen to remove the dust from those.
vor_ 12y ago
One issue I have with many of the flat designs I see posted online is that they're so simplistic and desaturated that they look like cheap, generic clip art. OS X Yosemite's system icons retain appropriate bevels and shadows for distinction and look even better than their iOS 7 counterparts.

jason_slack 12y ago

Thanks for releasing these. I am changing over now! Hoping my dock and icons flow better. Here is my new dock: http://imgur.com/2vEM5Yv http://imgur.com/2vEM5Yv Why the down vote?

abhinavk 12y ago
1. You complained about the downvote. 2. Image is low-resolution.
- jason_slack 12y ago
  so I got downvoted for taking a picture of my exact dock, exact size? So I should have made my dock way larger and posted a better quality picture? All I was doing was telling the author that I liked what she did and showing that I did indeed take time to implement it.
  - tinalatif 12y ago
    For what it's worth, I appreciate it :)

jarrett 12y ago

Philosophically or practically: What's the justification for nearly everyone switching to flat design? Is there any articulable reason it's "better" than the rich, three-dimensional style[1] that was previously popular? Or is it just an arbitrary trend? Some say the change is driven by high-DPI displays. I disagree. I don't see any intrinsic reason that flat designs look better than rich, three-dimensional designs on a high-DPI display. Without a doubt, flat can look nice, but so can things like this: http://www.sequelpro.com/blog/wp-content/uploads/2013/01/sequel-pro-1.0.png http://www.sequelpro.com/blog/wp-content/uploads/2013/01/seq... Another justification I've heard is that it's a reaction to the excesses of the previous trend. People often point to the leather motif in certain Apple applications as an example of such excess. But first of all, those examples are outliers; few designs actually went that far. Second, the existence of a questionable use of a given style is not an effective argument against that style in general. Third, "some things were extremely 3d, so now we'll be extremely flat" seems like contrarianism for contrarianism's sake. [1] Some call this skeuomorphism. I tend not to, because the term technically means something narrower than what we're talking about: http://en.wikipedia.org/wiki/Skeuomorph http://en.wikipedia.org/wiki/Skeuomorph

ender7 12y ago
Gradients and juicy-fruit graphics are like candy -- they provide an instant and strong positive feeling, but they don't age well. If you had to eat nothing but candy, you'd hate the sugar-coated morass your mouth had become. In general, a flat icon tends to age better and reduce "eye exhaustion" (not a physiological thing, but a psychological one). Note that this applies mostly just to icons; the entire UI is not so tightly bound by these rules. However, design is also trend-oriented, and flat is a rising trend.
- jarrett 12y ago
  > but they don't age well...In general, a flat icon tends to age better and reduce "eye exhaustion" Two thoughts on that: 1) Is that just an opinion? (If so, there's obviously nothing wrong with that.) Or is there some objective evidence? 2) How well do icons need to age? Realistically, how many icons in the wild will go 5+ years without a design refresh?

keehun 12y ago

Seems like you can't change the calendar icon. The calendar ICNS is used for the first time after cache reset, but once calendar opens, it uses its own embedded empty calendar icon and fills in the date. Any way for liteicon to change that blank calendar? I noticed you provided the blank calendar icns. I suppose I could open up Calendar and replace it to try it out.

tinalatif 12y ago
Oops, good call, calendar has to be done manually a little bit differently. I forgot to add instructions for that - I'll do it tonight

batmansbelt 12y ago

I don't like the firefox one.

reubenmorais 12y ago

Icon sets suck. They aim for system-wide consistency, but can never achieve it, because there are N+1 icons to be replaced. They focus too much on any given design pattern (flat, round squares, dark, etc.), and forget the basics: icons should represent the program, they should be memorable. The only sensible use case for an icon set I can think of is a graphic designer who wants to practice.

oneeyedpigeon 12y ago
With you until the last sentence. How about icon sets for those who are colour blind? Whilst I'm sure you could, to some extent, automatically convert, I'm also sure there are nuances that only a human designer could cater for. Also, how about different sets for different nationalities/cultures between whom analogies can vary greatly. It would be nice to solve the N+1 problem with a semantic hierarchy providing fallbacks, particularly in the case when only one application within a specific group is installed.

Vanayad 12y ago

I do not understand this trend of 'flat design'. It looks horrible. It started with Apple and the other copied it. Now microsoft has it, google started implementing it, samsung as well. It looks horrible.

abhinavk 12y ago
Well. Microsoft had it first with Windows Phone 7 and Windows 8. But yes it is now everywhere. Latest KDE Plasma release is flat too and other DEs will soon follow suit.

hlfcoding 12y ago

If you want to implement minimalist design, you might as well go the full nine yards and use no more than 2-3 (properly contrasting) colors. This is middle-of-the-road and frankly evokes neither elegance nor brilliance. To elaborate on why the above may be interpreted as harsh, by limiting the ingredients at your disposal to flat colors and simple shapes, you run the risk of amplifying the severity of any mistakes in their selection. The less visual information that get presented, the more the visual units come under closer scrutiny.