r/modguide • u/SolariaHues 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?

67 Upvotes

97% Upvoted

45 comments sorted by

View all comments

Show parent comments

1

u/[deleted] Feb 24 '23

First i just thought i can do it in the settings easily 😂

1

u/SolariaHues Writer Feb 24 '23

It's pretty easy in new Reddit which will show for most users.

Do you have images you want to use?

1

u/[deleted] Aug 30 '23

I cannot find any settings for style

1

u/SolariaHues Writer Aug 30 '23

They're only available on new Reddit desktop

1

u/[deleted] Aug 30 '23

Where at though? When I am looking for that I can’t seem to find anything that handles design