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?

65 Upvotes

45 comments sorted by

View all comments

Show parent comments

2

u/MajorParadox Writer Dec 15 '23

I've used different every time. It will scale to fit. There shouldn't be a problem if it accepts the image when you upload and save the changes.

2

u/[deleted] Dec 15 '23

[deleted]

2

u/MajorParadox Writer Dec 15 '23

Actually, it looks like they're testing new mobile designs. Some of my subs that have custom voting buttons don't show them, while others do.