Aether Icon Theme

What does everyones second-favourite Canadian developer do when he wakes up in the morning? First he makes coffee, usually by pouring coffee grounds and hot water directly into the sugar jar then drinking the resulting syrup. After that while he waits for the resulting diabetes and caffeine to kick in, he usually warms up for work by drawing a few icons to get into the productive mindset… This has been going on for a while.

So I’m pleased that this non-project has become complete enough that I believe I can share it around with the world a bit. Before I go on, I would like to express that this set is not an official project at this time. It may also randomly go totally unmaintained at any moment if the right people decide to strangle me.

Because I’ve been naming everything I get my hands on “Aether”, without further adieu I’m excited to present the Aether Icon Set;

aether-logo.svg

Everything needs a logo.

image8038

The Aether icon set takes cues from several existing icon specifications, along with heavy influence from Material icons. My hope is that icons from this set could present on Android and other platforms without seeming too out of place. As KDE applications make use of our mobile and convergent frameworks, it will in time become just as important for our artwork to be as portable as our applications.

The general design of the icons includes the use of folds, scores, and simple linear gradients inspired in equal parts by the concept of Kirigami and Material. Folds which visibly protrude from the icon may cast simple shadows. Icons generally aim for a middle-level of detail seeking clean and bold designs, and while there are keyline shapes it is encouraged to break from them for more dynamic silhouettes.

image7928

System settings and devices. Still a long way to go in this department.

The icons set is based on the ever steadfast Breeze icon set, and the intention is to retain the monochrome icons from Breeze while injecting a new set of full-colour icons to compliment them. Currently Aether requires breeze be installed on the system, as it will request Breeze icons in the manifest. It also lacks the coverage we enjoy in Breeze, so it’s also good to have it filling the gaps in Aether. While I do intend to use the Breeze monochrome icons, in some instances monochrome will eventually be overridden with colour icons for things like places and mimetypes for consistency purposes.

image7906

Folders in a variety of colours.

The Aether icon set currently contains over 150 new colour icons at 64px in scalable vector format. Of these, the vast majority use entirely original art, with a handful taking matching assets from Breeze and undergoing modification to fit the Aether aesthetic. The icons are designed so they can render quickly on the web with no loss in quality, as the modern web demands high-quality low-impact imagery in extreme DPI situations. I believe this is the most important aspect of design pulled from Breeze.

image8082

Applications, including Libreoffice and Qt development suites.

The Aether icon has a strict set of guidelines, along with a keyline template and an entirely new colour palette. The specification of the icon set allows the 64px icons to scale to 32px and remain pixel-perfect, with some icons scaling down to as low as 16px remaining completely readable.  This is not the long-term plan, and smaller sizes are already receiving partial coverage.

image7983

Folders are the most complete icons in Aether, with 16, 22, 32, and 64+ size icons available.

You can get the aether icon set via a scratch repository here:
https://cgit.kde.org/scratch/kvermette/aether-icons.git/

Even though I haven’t added the license to the repository yet, these are being placed under the Creative Commons Attribution-Share Alike 3.0 Unported license at http://creativecommons.org/licenses/by-sa/3.0/.

The scratch repo contains some working files and resources for those interested in contributing, but currently I have not written down the specifications. By reading the Google Material icon guidelines you will be roughly halfway there, but there are enough subtle differences to trip anyone up. In the scratch repo there is also a set of resource files with working master files, inkscape palettes, and extras.

If there is contributor interest let me know and I will write down the guidelines along with examples. Until then, I’ll accept contributions directly and simply adjust them as necessary if I’m able to fit them into Aether; this is still a very informal side project.

 

15 thoughts on “Aether Icon Theme

  1. and also how to contribute designed themmes not just icons, like the menu/highlight/window decoration/shutdown icons etc colours

    Like

  2. Pleeeease can you gove a tutorial, written or video, on how to make icons, for qt/kde and mobile scalable as you describe. I would love to do this but I have no idea, is it just inkscape? I mean a tutorial, for the absolute beginner, from how inkscape to upload and even how to add to or fork existing, this set of videos would be soooo appreciated!! I love KDE but my work and studies dont allow me to delve into this, I (and I imagine many people) just need a straightforward but detailed guide, I know you’ve made sped up youtube videos on the creation of icons and wallpapers, please make an instructional video(s)!

    Like

  3. It’s a nice icon set. can I sugest a few things ?:

    a).- A lighter colour palette, i “feel the icons a bit darker”
    b).- A new icon for the Desktop Folder, because the interior glyph is too big compared with other folders.
    c).- Maybe you can redone of the LO icons, maybe you can use the same icon for all. If you use the “libreoffice-main.svg” at base for these?

    Keep the good work ! It’s really good see more exclusive icon themes for Plasma and not ported themes.

    OffTopic (a little spam): i’m making icons for plasma desktop too, but my skills are not so good compared with you. If you want, see my github repo (thinking in feedback): https://github.com/fabianalexisinostroza/antu-icons

    Like

  4. Thank you so much for spending your time on something like this. Some of the icons look a bit awkward in small sizes (e.g. system settings), but this is still one of the best icon themes I’ve seen in a long time. Again, thank you.

    Like

    1. I think part of that awkwardness is when new icons are mixed with old icons; I noticed it early in development because Aether uses different sizing/positioning conventions than Breeze, and when Aether isn’t dominant in an area it really clashes badly. I saw it in full force during the first runs on app icons – using the fullscreen launcher the Aether icons looked strange until most were moved over.

      Systemsettings is one of the worst cases so far, but as I work through it I believe everything will start to look ‘proper’ once the new icons have fully converted over. The settings icons tend to have images of desktops, screens, and windows which really inflate the volume when compared to Aether which specifically avoids images of UI elements and hardware.

      Settings has also been a bit more difficult to do since, well, no icon set seemingly has good coverage, so I don’t have the references I want. Often one icon will cover several components, and I don’t find that acceptable. It actually frustrated me a lot because I count 90 unique icons needed for systemsettings, but Oxygen only has ~22 and Breeze has ~50ish (not including symlinks). The preferences and devices are the point of interest right now, so coverage will improve in short order though, and I’ll may try prodding people to make every systemsettings KCM request a unique icon.

      Like

  5. Screenshot with these icons?
    Also, why breeze monochrome icons will not be replaced? That’s the worst part of the breeze theme. Those icons are not intuitive, look all similar to each other.

    Like

    1. I’ll show some screenies in another post later, I’ve gotten some input and requests so when I follow up on them I’ll have enough material to blog again. 😉

      On the monochrome icons, I personally quite like them. I don’t think they’re perfect, but they are something extremely special. Going beyond my personal taste, there’s some practical reasons for using them;

      Probably the biggest is the sheer completeness of the Breeze monochrome icons. It’s actually insane how good it is, I don’t think another set of icons has had that much dedicated attention to making sure every icon is covered – even the really obscure ones. Just doing a quick check of the actions folder lists 4299 files, with 16px and 22px weighing in at 1500 and 1600 icons respectively. Even if 1/4 of those are symlinks, it’s still insane and awesome on a logistical level alone.

      Another big plus is the fact that they also support system colour schemes in a very reliable way using proper CSS in the icons. I believe they are also compatible with Gnome/GTK. The work required to do that was also quite immense – it had to be coded by hand. Even though support for recolouring is really weird right now in the Qt world, especially with convergent applications which use QML, I can tell you on a technical level the Breeze monochrome icons are the only set I know which have a future in this regard.

      There’s the Material and Mobile aspect as well. Mobile phones love their monochrome action icons. Aether is being designed with an eye on the convergent, and paired with the recolouring thing, Breeze monochrome icons are basically the only icons I know of which are really usable on both the desktop and mobile if you plan to blend into Android, iOS, and whatever Samsung is screwing up.

      I guess to cap it off, I was always planning on some form of ‘low colour’ icon for actions and status indicators. Be it monochrome or two-colour. There are several monochrome icons I do plan on updating and possibly trying to upstream, but that’s about the limit here… The cold hard reality is that it’s taken a team years to build up the monochrome icons in Breeze, and I still have literally hundreds of colour icons to do.

      If I had infinite time and resources I would still use monochrome, but I think I would meet halfway between Material and Breeze. Probably base the set off Breeze monochrome, and ‘Materialise’ them simply for that mobile cross-platform compatibility. I would also look to reduce the complexity of some of the compound icons. I would probably also depend less on lines and more on fills. But I’m nitpicking here, on so many levels Breeze is an unbridled success and to say I’m happy with them is an understatement. 🙂

      Like

      1. Don’t get me wrong, it is VERY much appreciated what you do, but I’ve recently tried doing a mockup and the icons in the toolkit are not self explanatory. Having icons not being self explanatory is a huge issue because you’d actually have to use them without reading what they do. I’m writing this from the phone, so can’t attach an example.

        Anyhow, I completely agree that monochrome actions are probably complete (or close to it), they are consistent and modern/minimalistic and this is awesome. But they are just difficult to quickly recognize because they all look alike. Sometimes I think there is a graphics rendering glitch with e.g. ‘save as’ because the border around pen is not clear because I kinda use peripheral vision to recognize icons. For usability purposes, having s bit more colors would help (painting the pen yellow) etc..
        Also, all icons are transparent. IMHO, this is bad because recognizing icons while focusing on other stuff needs to be quick and not recognizing shape which changes color of internal shapes.
        I think e.g. icons for Microsoft office toolbar are a goof example to be compared to breeze. E.g. the left-align or some similar icon in breeze is like noise, too many lines and again, difficult to recognize quickly.

        Not sure if others have the same issues as me.

        Anyhow, new icons look much more user friendly than those before. Like the attached pics very much. Hope that you promote this into at least an option in plasma distributed by default.

        Note: more color means a few colors on an icon. Not all icons.

        Like

  6. Looks like flat design is finally going away. Thank goodness for people like yourself to move visuals forward away from that nightmare.

    Like

Leave a comment