I need SVG sources for icons so I can use them in sketch for mockups. However it seems as if there's no SVG library like Google's Material Icons, only the code for integration.
I think the version 5 will have a SVG SDK, however meanwhile, you can use https://icomoon.io/app/ to export SVGs from Font Awesome (and other packs) icons.
There is now (as of version 5). Free icons here. This outlines how to use them.
Related
I'm looking for best solution how to implement .svg icons into web.
Basically, I need to implement just few icons, what I have in my .psd, so I can choose any format, but it will be nice to have vector so I've choosed .svg.
Only, the problem is that I need to change color of that picture and also I need to be sure that it will be supported on all major browsers, IE as well.
For now, I'm using tag < object > which works nicely, but I'm unsure about browser support and also I can't simply change color.
How would you solve this situation ?
The .svg icons are very small and simple, I've also thought to convert them into fonts or icons, but not sure about best workflow how to do it properly.
Also, I was thinking about using .pngs, but there is a problem with changing colors and of course "scaleabness", but if I will not find out anything, I will probably end up with this...
I personaly like working with fonts (like font awesome and so...), as they are scaleable, colorable.... and displayed everywhere
Is possible to convert and add these icons from .psd to such a format, that will be close to fonts ?
Thank you for your answers :)
Check browser support for the various ways to implement SVG at http://caniuse.com/
Common workflows:
Automatically process .svg files into icon fonts, usable in CSS, with Gulp
Automatically insert .SVG content into HTML as data URIs, with server middleware
Insert all SVG icons inline into a page and reference as SVG Symbols
Insert all icons into one SVG document as individual symbols, and refer to individually with svg 'use' - https://css-tricks.com/svg-use-with-external-reference-take-2/
So I've found a solution
I've generated my own fonts from .svg. As icons we're small, there we're no problem to work with them like fonts.
I've used
http://fontastic.me/
Very easy to work with, just upload your .svg, make some customisations like name of your fonts, mapping and add them into your page.
The best method is to use SVG code directly in the web browser, which is supported by almost all major web browsers. The SVG code can be easily customized with all of the CSS attributes, for example, you can use current Color for properties like fill and stroke color so that one can easily change the color of your free SVG icon from their CSS. This will also reduce the number of HTTP requests required to retrieve the image icon.
I'm looking at this site: http://www.calgaryclimbing.com/rates/ . On their footer they have very clean looking icons that link to their social media pages. I want to do the same using the same icons they are using. But when I inspect the elements It shows that they use an i tag and that the class links to some css code that uses the content property. I want to use the image icon so my questions are how can I get the image? And why was it programmed this way? Why not just use an image that you could click on?
I didn't check the link you provided but it's most likely a custom font just like Font-Awesome which you can use to put many kind of icons in your Web Site/App.
Font-Awesome use the <i> tag as well just like you explained.
Why using Font-Awesome?
As they say:
Font Awesome gives you scalable vector icons that can instantly be
customized — size, color, drop shadow, and anything that can be done
with the power of CSS
I have my own custom SVG. I have font awesome working on a site I own. I'm not familiar with exactly how it is installed etc. Are there any really basic instructions on how to add an icon to it please?
I am reading and trying these instructions here http://spin.atomicobject.com/2012/12/16/create-your-own-font-awesome-icons/
I am running twitter bootstrap3, and I am extremely happy with the new way it handles the icon as fonts. However: I need some custom icons; I need to make them myself, and ideally integrate it into the existing font. I have searched with no luck. I am well familiar with illustrator, vector graphics etc, but how to integrate?
Worst case scenario, I will make images the traditional way, but hope there is a better solution.
How do I integrate a custom glyphicon with the existing (bootstrap 3) glyphicon font?
This process might be one option.
You could use the IcoMoon App. Their library includes FontAwesome which would get you off to a quick start, or you download glyphicon, and upload the fontawesome-webfont.svg
For your custom icons, create SVGs, upload them to IcoMoon and add them to the FontAwesome / Glyphicon set.
When you are finished export the font set and load it as you would any icon font.
Good luck!
UPDATE
If your imported SVG file icons seem misaligned after importing into the iconmoom.app, first check how they actually look when used on a web page. It seems to me that the preview may not always be perfect. Alternatively, there is an edit icon in the iconmoon.app tool bar which lets you move and resize.
If anyone is looking for an alternate tool to the one mentioned here, I've found Glyphter to be very useful. It is fairly straight forward and allows you to upload an .svg file, groom it, and add more glyphs from several other font packs. You can then download the entire bundle as its own font.
Does anybody know a open source/free, 32x32 or bigger, complete set of "office" icons for integration in a Rich Text editor - i.e. buttons like
Copy
Paste
Text color
Background color
Bold / Italic / Underline
?
You should look into the Tango Icon Library, it looks great and it's into the public domain (as noted in their FAQ).
The have the same icons in 16x16, 32x32 and 64x64 but they also gave you the svg source, so, you can easily get any dimensions you want exporting them with Inkscape
You can also use the LGPL Crystal Clear as recommended by cobbal.
have a look at http://commons.wikimedia.org/wiki/Crystal_Clear
32x32 or Larger
The Best Vector Icon Sets All In One Place
21 Best Icon Sets for Designing Web Apps
On 2 I think this one might be what you want: WeFunction Free Icon Set
16x16 Icons
You should be able to find icons to suit your needs here. I use this page as a reference all the time when looking for little icons:
All the Small Icons You’ll Ever Need by the Web Design Ledger
another great one that is not listed.
http://p.yusukekamiyamane.com/ is a free icon set with 3160 icons atm. they are 16x16 and some are animated gifs.
Some one in my team uses this. Ico fx. I have never used it my self but the icons always look good.
If your project is non-commercial, then look at this nice spherical Icon set.
If your project is commercial, I'd suggest that a hundred bucks or so would be a good investment :-) eg. something from the Text bundle at IconShock.