Our Core icons come in four different versions built with the same 'skeleton' structure. The Line version works great when you need a more subtle and neutral design. Solid is a more legible option and works great with light color fill on a dark background. Duo and Flat are perfect for matching your brand colors.
With Core it was essential to follow a very strict approach for the most complex icons, defined by the search for a visual reference, a first approach to a simplified version of that reference and the construction of the icon on the grid, which results in the final sign.
Core icons are designed as simplified as possible in order to avoid using irrelevant information, this way we make sure our icons remain perfectly legible at small sizes. Its timelessness makes it a great choice, whether it's used today or 50 years from now.
Every Core icon was built on a 14x14px grid, which allowed us to keep them simple and focus on legibility over other things. We also used rounded corners and ends to give these icons a more pleasant touch.
Line and Duo icons use a 1px stroke as default thickness and minimum separation between shapes while Solid use gaps to separate elements and Flat try to avoid them to achieve a, you guessed it, flatter look.
Anytime! No, but seriously, Core is the perfect choice if you're sure you need a neutral and professional-looking set of icons, but it's also what you might want if you're not sure what your design needs, because Core will make it work for you.
Using our Streamline app or any vector software (Figma, Illustrator, etc.), you can easily change our icons colours and adapt them to your project. By changing the colours, our icons can look dramatically different and have a unique style that can bring personality to your projects. Can you believe all these example come from the same icon set?
Should you need icons for wire-framing, presentations, Web applications, buttons, promotional material, or something to put above your desk - Helveticons got you covered. Bundled with your download comes a .psd you can get inspiration from. Examples ranging from a basic Web button to a strong logotype should get you going in no time.
I'd like to do the latter everywhere, and I see I can choose icons in this matter when editing a content type in the back office, however I am using a modified version of USiteBuilder and a code first approach to my content types.
But good you figured out another way to achieve it - actually there is a couple of font packages released and the latest is font-awesome, which can be fetched here -extensions/font-awesome-icon-pack-and-media-icons - It might be relevant for others who may come across this issue.
Stumbled upon a really nice set if Royalty Free icons called helveticons. $279 you may never need to purchase any icons from Stock library ever again. All available in different size and in vector format.
We all know, that some of the most valuable services we can do for our clients, is to make their lives easier when administrating their Umbraco website. One of the little big details in that area is icons. Icons are used throughout the backoffice to guide editors on their quest for getting content on the web.
Umbraco ships with a bunch of very nice icons, based on the free iconset Helveticons. And most of the times, your needs are covered with them. But when you want to go the extra mile, you also want to have more meaningful icons.
In Umbraco 7, icons are based on icon fonts, and it is also very easy to add new ones. All you have to do is basically to add a stylesheet containing your icon font to the backoffice, through a package.manifest file.
You can get your icon font from popular sources like glyphicons and fontawesome, or you could roll your own. Building a font from scratch usually is quite tedious. Luckily there is a few tools that help you. You can create your own icon font at sites like IcoMoon and Fontello. Both sites are pretty easy to work with. You can select your desired icons, and even upload your own. When finished you just click a few buttons, and receive your icon font.
This is where task runners come to help. With the help of a few gulp-plugins, we can create our own repository of SVG icons, and let Gulp do the heavy lifting when it comes to generating a font, css, and adding it to Umbraco.
I usually look up icons at Iconfinder.com, a great search engine for icons with millions of them. Look for SVG icons, with only one color. They work best in Umbraco. Buy and download your desired icon, and save it in the icons folder.
Gulp-iconfont-css can be set up with a template for the css, so I did that to make sure the implementation of the icons was complyant with the Umbraco way of handling icons (the default template wasn't). The css file is generated, and saved wherever gulp-iconfont-css is told to. This is where I use font name, Umbraco path, install path and filename.
In den Internetauftritten wird das Iconset "Helveticons" verwendet. Diverse Icons werden direkt im System bereitgestellt. Diese Symbole dürfen auch nur auf den KoGIs-Seiten verwendet und nicht verändert werden.Sofern neue Icons erstellt werden sollen, müssen diese nach dem Raster der Helveticons aufgebaut werden und visuell der Bildsprache der Helveticons entsprechen.
Umbraco 7 has a great selection of about 300 icons courtesy of Helveticons. This is more than enough for most people but I wanted to experiment and explore with the idea of adding my own custom icons to the dialog in Umbraco 7.
After quickly asking Per Ploug on how I could add icons to the list I got to work with creating a quick package to add over 2000+ icons which is way too many but was more of a experiment on performance to see how well Umbraco would cope and the answer is surprisingly fast in comparison to the 200 limit or so that Umbraco 6 and previous versions have.
I totally agree with minimal design qualities when it comes to icons and overall site design. These examples of icon sets are great. Checkout some more insight on icon usage within website design if you are interested!
-insights/2009/10/making-your-web-icons-usable.php/?s=bl
Great collection. You can add my free (CC-NC licensed) 244 black or white mono color icon set (made for Gentleface custom icons design. Icons are optimized for 1616 pixel size and available in 1616, 3232 and 4848 pixel sizes. Perfect for wireframes, toolbars or iPhone/iPad apps.
You know, in 50 years, icons won't be needed. If you want to save your work, blink twice, or stand on your head, or just say "Save" in the language of your choice, and voila - it's saved... no need for a visual anymore :)
If you deviate from the common icons for operations like save, your users are going to say your programs is hard to use. Even if you simplify everything so that you think it's perfectly intuitive and much better than what everyone else is doing, they'll say it's hard to use, just because it's not what they're used to and not what they expect. Remember, to your users, whatever Microsoft and the other big guys do is "correct," so if you're doing something different, you are, by default, wrong.
IMO, icons are useful because they're constant symbols we can associate with different actions. In that sense, the floppy is very appropriate simply because it is nearly universal. Never once in my life have I seen an interface with unfamiliar icons (no text at all) and been able to figure out what it does (I'm looking at you, Mac OS). I think even if you come up with an image that is more true to what is actually going on, such as a picture of a hard drive, you'll cause far more confusion than if you left it alone. Even if people such as myself can identify the icon as a hard drive, that doesn't tell us what you're going to do, it just means a hard drive is somehow involved...
It's funny that I found this discussion because I was looking for a standard 'save' icon I could download to replace the 'new and improved' icon that UtlraEdit started using and which was too difficult to pick out on the toolbar. Yes, it is outdated, but everybody recognizes the 3.5" floppy disk image as representing 'save'! Yes, programmers should not be doing things because 'that's the way it's always been done' but icons are language and not methodology. Don't invent a new word just because it would be cool unless your aim is to hide what you are saying from the previous generations.
In this article we are presenting 45 free small symbols vector icon sets. All of these icons are multi-purpose and ready for use but also editable; with all sets you will find source files (EPS, AL, PSD, PNG). Most of them are monochromatic you can add colors, create your own letterpress and different effects instead of spending time to create your own new icon. All these symbols are professionally designed and set to the proportions of a regular typeface to break that copy paste stigma into your design.
Thus, the odes to Helvetica are endless. You can download Helveticons so that your designs are unified down to the last edit icon. You can purchase a commemorative Moleskine notebook, or endless posters written in Helvetica. Or give in to your inner cat lover and buy this Helveticat poster (not written in Helvetica).
I came across a selection of icons and fonts that are not extremely popular yet. These icons and fonts are of super-b quality. Picto Foundry for example is optimized for the retina display on iPhone 4 and for use on the iPad. There is also a commercial selection available.
This is just to give you an idea how you can go a bit further then just applying the icons in your website. Most of the icons listed here also have bigger sizes but this selection has the best mini icons out there that fit perfectly in a minimal design.
As a web designer having a good resource of icons is essential. The web is full of free icons, finding them is easy, finding the good ones is another matter. A good icon pack contains a broad selection of icons from documents to control icons.
aa06259810