Hello, awesome social icons! Can you tag a version for this library? Since the css is quite large (20kb) and there are a lot of icons, I want to include it in Cdnjs (https://github.com/cdnjs/cdnjs / http://cdnjs.com) for faster access. Thanks!

When not using the css styling file Firefox and other browsers set to 0 by default missing width and height attributes in the SVG images.
Doing so (following strictly the W3C specs) the images would not render.

That's the case when the icons are used as images together with a canvas.

Can it be possible to set a default width and height attributes to the icons?

If there's any icons you'd like to see in webicons, I'd love to hear about them. Drop them in this issue and I'll consider them. Thanks!

It appears as though the PNG fallback images aren't double sized images that are scaled down which is the norm for using PNG images on high resolution devices like iPhone's and iPad's, as well as other high resolution smartphones and computing devices.

As seen here: http://caniuse.com/#feat=svg-css - support for SVG's as background images is only partially supported and has issues in mobile Safari. Are high resolution fallbacks needed?

Hi. It'd be good to see an updated Skype icon. The real Skype icon has a thicker font for the 'S'

Should look like this:
http://www.skypeassets.com/i/common/images/icons/apple-touch-icon.png

Should be pretty easy to turn into a cocoapod, usable by rubymotion and objective-c.

https://github.com/CocoaPods/CocoaPods/wiki/The-podspec-format

https://www.periscope.tv
https://www.periscope.tv/v/images/press_assets/largeicon.png

We want to make a icon suggestion a Share button with WhatsApp

Hello,

I'm trying to swap out the YouTube icon for the YouTube red square background/white playbutton.

These icons are used in a Zurb Foundation 4 site. You can see the defaults working just fine here: http://www.getty.edu/visit

I can't post the busted one, as I don't have a publicly available dev area, but I posted the svg code below if you want to swap out an existing webicon and give it a spin.

I downloaded the vector art from YouTube. I opened the fc-webicon-youtube.svg and started there:

1. Copied/pasted vector shapes from YouTube art into webicon svg
2. resized / edited shapes to match the existing webicon background art height and shape, exactly.
3. expanded all compound shapes, edited transparent vectors to be solid
4. Saved as SVG
5. Set the options to the following:

• SVG Profile 1.1
• Subsetting: none
• Image location: link
• CSS Properties: Presentation Attributes (default)
• Decimal Places: 3 (default)
• ... actually everything else was default.

When it displays with the .medium class, the background is blank.

When I open the .svg file in a text editor, I see that there's some extra stuff, like a width and height setting in the tag, a tag wrapping the gradients and such. When I remove those, the icon resizes down too small, and begins to repeat. I also noticed that the SVG code AI spits out doesn't match the other webicons, so... curious if this is the new Adobe Illustrator screwing things up?

If I go into FireBug or Developer Tools and set the background-size: 100%; to have an !Important tag, it works (and none of the other webicons break). Weird.

I've attached the svg code here.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<g>

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="25.8431" y1="-0.1843" x2="25.8431" y2="47.8705" gradientTransform="matrix(12.75 0 0 12.75 -23.5 92)">
        <stop  offset="0" style="stop-color:#E42C26"/>
        <stop  offset="1" style="stop-color:#B41217"/>
    </linearGradient>
    <path fill="url(#SVGID_1_)" d="M612.349,625.763c0,42.289-34.298,76.587-76.587,76.587H76.238
        c-42.289,0-76.587-34.298-76.587-76.587V166.238c0-42.289,34.298-76.587,76.587-76.587h459.524
        c42.289,0,76.587,34.298,76.587,76.587L612.349,625.763L612.349,625.763z"/>
    <path fill="#841818" d="M493.928,512.853c-15.711,16.46-33.327,16.54-41.402,17.504c-57.822,4.179-144.653,4.309-144.653,4.309
        s-107.434-0.982-140.491-4.152c-9.195-1.726-29.843-1.201-45.563-17.661c-12.389-12.541-16.42-41.017-16.42-41.017
        s-4.134-33.439-4.134-66.874v6.007c0,33.435,4.134,66.874,4.134,66.874s4.031,28.476,16.42,41.017
        c15.72,16.46,36.368,15.935,45.563,17.661c33.059,3.17,140.491,4.152,140.491,4.152s86.831-0.13,144.653-4.309
        c8.075-0.964,25.691-1.044,41.402-17.504c12.388-12.541,16.428-41.017,16.428-41.017s4.125-33.439,4.125-66.874v-6.007
        c0,33.435-4.125,66.874-4.125,66.874S506.316,500.312,493.928,512.853z"/>
    <path fill="#FFFFFF" d="M510.357,306.734c0,0-4.04-28.476-16.428-41.017c-15.711-16.455-33.327-16.536-41.402-17.5
        c-57.822-4.183-144.563-4.183-144.563-4.183h-0.179c0,0-86.737,0-144.563,4.183c-8.075,0.964-25.683,1.045-41.402,17.5
        c-12.389,12.541-16.42,41.017-16.42,41.017s-4.134,33.439-4.134,66.878v31.35c0,33.435,4.134,66.874,4.134,66.874
        s4.031,28.475,16.42,41.017c15.72,16.46,36.367,15.935,45.563,17.661c33.059,3.17,140.491,4.152,140.491,4.152
        s86.831-0.13,144.653-4.309c8.075-0.964,25.691-1.044,41.402-17.504c12.388-12.541,16.428-41.017,16.428-41.017
        s4.125-33.439,4.125-66.874v-31.35C514.482,340.173,510.357,306.734,510.357,306.734z"/>

        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="27.0215" y1="-0.1843" x2="27.0215" y2="47.8706" gradientTransform="matrix(12.75 0 0 12.75 -23.5 92)">
        <stop  offset="0" style="stop-color:#E42C26"/>
        <stop  offset="1" style="stop-color:#B41217"/>
    </linearGradient>
    <polygon fill="url(#SVGID_2_)" points="265.215,442.948 376.85,385.1 265.197,326.848     "/>
    <path id="The_Sharpness_1_" fill="#841818" d="M265.197,326.848l97.915,65.381l13.738-7.129L265.197,326.848z"/>
</g>
</svg>

:)

(I don't dare to ask)

Just browsing the web for the complete set...

In the code below, shouldn't the no-svg icons have a file extension (.png)? I couldn't get the code to work without it, though may have been doing it wrong.

.no-svg .webicon.f500px.large {
  background: url("webicons/webicon-f500px"); }

Hello,
back in issue #27 I was trying to update the YouTube webicon.

We have a couple internal WebIcons at our museum that I want to add to the webicon library (but probably wouldn't get used much by anyone else, but who knows?) -- ArtBabble, our blog, and a couple other little apps or external sites that are fairly specific to museum world stuff.

That issue got closed, but Adam you recommended opening a new issue if I ran into this again. So... here I am. I came up with steps to make my own .svgs work, but I'm curious if there's some setting I'm missing in Illustrator that will have these work by default, rather than having to reopen them in a text editor to fix?

Can you please let me know what it is I'm doing in saving out .svg from Illustrator CC that's busting these things, or what I need to alter in the svg code to make them work?

I'm reposting my steps here from #27 to make it easier to deal with.

I create the vector art in Illustrator CC. I open one of the working webicons up and...

1. Copied/pasted vector shapes from my art into webicon svg
2. resized / edited shapes to match the existing webicon background art height and shape, exactly.
3. expanded all compound shapes, edited transparent vectors to be solid
4. Saved as SVG
5. Set the options to the following:

SVG Profile 1.1
Subsetting: none
Image location: link
CSS Properties: Presentation Attributes (default)
Decimal Places: 3 (default)
... actually everything else was default.
When it displays with the .medium class, the background is blank.

When I open the .svg file in a text editor, I see that there's some extra stuff, like a width and height setting in the tag, a tag wrapping the gradients and such. Doing the following fixes the svg and makes it work.

1. Edited the svg tag to remove the width and height attributes.
2. Added fill-rule="evenodd" clip-rule="evenodd" to the path tags.

That fixes it and makes it work.

Hi,
First of all, nice job!
I wonder if you could add a Wikipedia icon? After all it's also a social network.

This might be a bad idea, but have you given any thought to the idea of using image sprites for the fall-back images? I realise this might make adding new icons a little bit tougher, but should make for much more optimised sites.

(I would also suggest this for the SVG files, but I don't know enough about SVG to know if anything like this would work).

Hi,

Firstly, they're great, so thanks a lot. However just trying to work out why the icons on both the example page on the Zurb site and also the site I've implemented them on look blurry on my Samsung Galaxy S3, using Chrome. It definitely supports SVG (did .svg { background:red; } and entire site went red).

Any ideas what might be causing this?

Thanks,

The following icons are not the same size as the majority of icons.

• webicon-fairheadcreative.png (44x44 instead of 48x48)
• webicon-medium.png (40x40...
• webicon-pocketapp.png (44x44...
• webicon-potluck.png (40x40...

Great work with this repo! It's a life saver!

https://github.com/steakknife/fc-webicons-rails

This is awesome, thanks for your work. How are these licensed?

Sir,
Would you happen to know why webicons not Showing on Opera 12.14 http://hardwearshoes.net/__index.html ? Is there any specific code I'm missing?

No idea how to do this yet myself, but willing to try it out.

WordPress Plugin using these icons: https://github.com/dtbaker/wordpress-webicons

Do you plan to update Instragram icon with the new (and discussed) one ?

Thanks in advance!

https://github.com/bower/bower

Looking through your CSS it looks like this was either generated by sass/less or a prime candidate to benefit from it.

Can anyone please provide these?

While we're at it, it could be interesting to have Flattr icons to go along with the kickstarter and indiegogo icons.

It would be nice to have something for ohloh.net to link to an open source project's activity statistics!

It would be great to get icon for Pandora in this collection!

Losslessly optimising the PNGs would save ~71kb, reducing the file size of the images by 20% on average and the images would look identical with no loss in quality.

Use Imageoptim on OS X or PNGGauntlet on Windows to losslessly optimise the images.