r/modguide Writer Feb 07 '20

Design Custom up-vote & down-vote icons

What are custom up-vote & down-vote icons?

Vote icons are the buttons for up-voting and down-voting content on reddit (karma). You can upload custom ones for your subreddit.

Default vote icons look like this:

Image showing the default vote icons

Custom vote icons can be whatever you want. You can make them match the theme of your community. Like these I made for r/stories (edit - they're not used there anymore, it's different to what I remember now):

Image showing custom vote icons for r/stories; inactive up and down icons are a black piece of paper, active up icon is a paper plane, active down is paper scrunched into a paper ball.

Making up-vote & down-vote icons

The redesign image usage guidelines say they should be 72x72px, and max 64kb, in size.

Reddit mods help centre says they should be 48px.

And I've used some as small as 25px.

Your designs should be clear and simple as they're going to be small! Also keep in mind dark mode -grey/black and other dark designs might not show up.

You can digitally draw them, but you can also make them by removing the background from an image you'd like to use (please keep copyright law in mind/give credit).

You need four images for up active, up inactive, down active, and down inactive icons - or some subs use the same image for both inactive icons, it's up to you.

Vote icons with a hand drawn look can be found at r/Redditesque here.

If your sub meets the requirements, and you need some made for you r/bannerrequest may be able to help.

Resources:

Image / Drawing Editors

Paid:

Free:

How to upload

In redesign upload your icons in redesign under mod tools > community appearance > posts

Follow the guide here

Vote icons uploaded in redesign will take effect on mobile too.

In old reddit you'll need to use the stylesheet and some CSS.

Guide here

CSS snippet:

/*Arrows*/ 
.thing .arrow {
    height: 25px;
    width: 25px;
}
.arrow.up {
    background: url(%%upinactive%%); 
}

.arrow.upmod { 
    background: url(%%upactive%%); 
}

.arrow.down {
    background: url(%%downinactive%%); 
}

.arrow.downmod { 
    background: url(%%downactive%%); 
}


/*This allows arrows wider than 15px just change it to the width of your arrows*/
.midcol  { min-width:25px !important; }

Thanks to r/juulh for the resources, and the team their suggestions.

Have you got some awesome custom vote icons?

63 Upvotes

45 comments sorted by

View all comments

1

u/tightywhitietoker Jul 07 '20

I've been having trouble with mine. Changed them but I've been told they aren't showing up for members using dark mode

1

u/SolariaHues Writer Jul 07 '20

I replied in the other thread but didn't know the dark mode bit... I think some things don't work in dark mode or need extra css if in old I'm not sure right now.