WordPress.org

Plugin Directory

Test out the new Plugin Directory and let us know what you think.

Genericon'd

Enables easy use of the Genericons and Social Logo icon sets from within WordPress. Icons can be inserted using either HTML or a shortcode.

I have an idea for an icon!

Great! I'm a monkey with a crayon! Seriously, though, I didn't make Genericons, I have no artistic ability to make more. If I did, we'd have a unicorn one. Please file issues and requests for new icons directly with Genericons.

Have a desire for social icons like Twumlrbook? Submit that directly to Social Logos

What's the difference between Genericons Neue, Social Logos, and 'Classic' Genericons?

Are there any known conflicts?

Not at this time.

What are all the icon names?

On your WP dashboard, go to Appearance -> Genericon'd. The page there will list all the icons and their file names.

Can I add them to menus?

No. You can't add shortcodes to menus at this time. There used to be a workaround with using the icon code, but since we're not using Font Icons anymore, you can't anymore unless you enable Legacy Font Icons.

What are Legacy Font Icons?

If you still want to have the old font-icons available, you can enable them by checking boxes on the settings page. It's not recommended though, as the font will slow your page down.

How do I change colors?

Using CSS with SVGs is weird. Instead of something like .genericon {color:red;} you'll have to use the fill parameter. For example, if you just want Twitter to be blue, add svg.social-logos-twitter {fill:blue;} and so on and so forth.

Why are some icons using `genericons` and others use `social-logos`?

Because in version 4.0, Genericons ceased development and moved to Genericons Neue. In doing so, they dropped support for all social media logos. Since I didn't want to leave everyone out in the cold, I pulled in the Social Logos icon set.

Okay, but I want to change color in just this one use...

I know what you mean. Try this: [genericon icon=twitter color=blue]

It uses inline styling, which I hate, but this was the best way to solve the problem that I could find (suggestions welcome).

Speaking of, can I make just this one icon bigger?

Sure can! Use this: [genericon icon=twitter size=2x]

You can use 2x through 6x. Anything else punts it to 1x.

I want to repeat an icon

You do it like this: [genericon icon=star repeat=4]

Can I flip an icon?

Sure! [genericon icon=twitter rotate={90|180|270|flip-horizontal|flip-vertical} ]

How about changing the hover-color?

This is less complicated than it looks but requires CSS:

svg.social-logos-twitter:hover {
    fill: purple!important;
}

If you wanted it to be for links only, then use a svg.social-logos-twitter:hover since you wrap the href around the shortcode.

Aren't they called Genericons with an S?

Yes, but Genericon'd is a Zaboo-esque sort of way of saying 'These icons have been genericonified!' I was in a The Guild frame of mind. Also since this is not the official plugin, I didn't want to use that slug.

Requires: 3.9 or higher
Compatible up to: 4.7
Last Updated: 1 week ago
Active Installs: 5,000+

Ratings

5 out of 5 stars

Support

0 of 1 support threads in the last two months have been marked resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
20,5,1
100,1,1
0,2,0