new, nicer sticky/lock/bumplock/cyclic icons thanks to a friendly anon and themes can be edited to change their color per-theme

gulp/res/css/style.css

@@ -730,6 +730,11 @@ input:invalid, textarea:invalid {
 	color:var(--capcode-color);
 }
 
+.post-icons {
+	filter:var(--icon-color);
+	vertical-align: middle;
+}
+
 .post-tripcode, .post-name {
 	color: var(--name-color);
 }
@@ -1108,7 +1113,8 @@ are these (along with condensed flag image) originally from here?
 	display: inline-block;
 	width: 16px;
 	height: 11px;
-	background:url(/img/flags.png) no-repeat
+	background:url(/img/flags.png) no-repeat;
+	image-rendering: crisp-edges;
 }
 
 .flag.flag-ad {background-position: -16px 0}

gulp/res/css/themes/chaos.css

@@ -1,4 +1,5 @@
 :root {
+	--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%);
 	--alt-label-color:#001010;
 	--alt-font-color:#00CCCC;
 	--background-top:#000505;

gulp/res/css/themes/choc.css

@@ -1,5 +1,6 @@
 /*tomorrow*/
 :root {
+	--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%);
 	--alt-label-color: #42200f;
 	--alt-font-color: #ff7e83;
 	--background-top: #2f1903;

gulp/res/css/themes/gurochan.css

@@ -1,5 +1,6 @@
 /*gurochan*/
 :root {
+	--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%);
 	--alt-label-color: #e6cbc0;
 	--alt-font-color: #000;
 	--background-top: #EDDAD2;

gulp/res/css/themes/lain.css

@@ -1,5 +1,6 @@
 /*lainchan*/
 :root {
+	--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%);
 	--alt-label-color: #333;
 	--alt-font-color: #bbb;
 	--background-top: #1E1E1E;

gulp/res/css/themes/makaba.css

@@ -1,5 +1,6 @@
 /*makaba*/
 :root {
+	--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%);
 	--alt-label-color: #f5f5f5;
 	--alt-font-color: #333;
 	--background-top: #EEE;

gulp/res/css/themes/navy.css

@@ -1,5 +1,6 @@
 /*tomorrow*/
 :root {
+	--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%);
 	--alt-label-color: #1a1e34;
 	--alt-font-color: #bfbfbf;
 	--background-top: #080c19;

gulp/res/css/themes/rei-zero.css

@@ -1,5 +1,6 @@
 /*rei-zero*/
 :root {
+	--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%);
 	--alt-label-color: #29373e;
 	--alt-font-color: #d6d6d6;
 	--background-top: #000E1C;

gulp/res/css/themes/sushi.css

@@ -1,5 +1,6 @@
 /*sushi*/
 :root {
+	--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%);
 	--alt-label-color: #B6DDDE;
 	--alt-font-color: black;
 	--background-top: #2e99cc70;

gulp/res/css/themes/tomorrow.css

@@ -1,5 +1,6 @@
 /*tomorrow*/
 :root {
+	--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%);
 	--alt-label-color: #282a2e;
 	--alt-font-color: #c5c8c6;
 	--background-top: #1d1f21;

gulp/res/css/themes/tomorrow2.css

@@ -1,5 +1,6 @@
 /*tomorrow*/
 :root {
+	--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%);
 	--alt-label-color: #282a2e;
 	--alt-font-color: #c5c8c6;
 	--background-top: #1d1f21;

gulp/res/css/themes/yotsuba b.css

@@ -1,5 +1,6 @@
 /*yotsuba b*/
 :root {
+	--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%);
 	--alt-label-color: #98E;
 	--alt-font-color: black;
 	--background-top: #d6daf0;

gulp/res/css/themes/yotsuba.css

@@ -1,5 +1,6 @@
 /*yotsuba b*/
 :root {
+	--icon-color:invert(17%)sepia(89%)saturate(7057%)hue-rotate(2deg)brightness(93%)contrast(120%);
 	--alt-label-color: #800;
 	--alt-font-color: #fff;
 	--background-top: #fed6af90;

gulp/res/img/bumplocked.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="164" height="156" version="1.0">
-<path d="M36,0v70h-36l82,86l82-86h-36V0z" fill="#f00"/>
-</svg>

gulp/res/img/cyclic.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-width="24" height="24"
-viewBox="0 0 24 24"
-style="fill:#f00;"><polygon points="11,6 11,0 14,3 "></polygon><polygon points="13,18 13,24 10,21 "></polygon><polygon points="18,11 24,11 21,14 "></polygon><g>	<path d="M5.079,8C6.463,5.611,9.041,4,12,4c0.339,0,0.672,0.028,1,0.069V2.05C12.671,2.018,12.338,2,12,2C7.9,2,4.381,4.47,2.838,8		H5.079z"></path>	<path d="M16,5.079c2.389,1.384,4,3.962,4,6.921c0,0.339-0.028,0.672-0.069,1h2.019c0.033-0.329,0.05-0.662,0.05-1		c0-4.1-2.47-7.619-6-9.162V5.079z"></path>	<path d="M8,18.921C5.611,17.537,4,14.959,4,12c0-0.339,0.028-0.672,0.069-1H2.05C2.018,11.329,2,11.662,2,12		c0,4.1,2.47,7.619,6,9.162V18.921z"></path>	<path d="M18.921,16c-1.384,2.389-3.962,4-6.921,4c-0.339,0-0.672-0.028-1-0.069v2.019c0.329,0.033,0.662,0.05,1,0.05		c4.1,0,7.619-2.47,9.162-6H18.921z"></path></g><polygon points="6,13 0,13 3,10 "></polygon></svg>

gulp/res/img/locked.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
-<path fill="#f00" d="m3,9h1V6a5,5 0 0,1 12,0V9h1v11H3M14,9V6a4,4 0 1,0-8,0v3"/>
-</svg>

gulp/res/img/sticky.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 508.512 508.512" style="enable-background:new 0 0 508.512 508.512;" xml:space="preserve">
-			<path style="fill:#f00;" d="M333.712,255.142V90.54c40.173-13.603,63.565-35.501,63.565-51.043
-				c0-52.664-286.042-52.664-286.042,0c0,17.131,23.424,38.552,63.565,51.647v163.998c-40.141,10.202-63.565,29.049-63.565,54.952
-				c0,24.377,61.34,37.344,127.162,39.092l-0.032,0.413v95.347c0,17.544,7.119,63.565,15.891,63.565
-				c8.74,0,15.891-46.021,15.891-63.565v-95.347l-0.032-0.413c65.822-1.78,127.162-14.779,127.162-39.092
-				C397.277,284.191,373.885,265.344,333.712,255.142z"/>
-</svg>

views/includes/posticons.pug

@@ -0,0 +1,15 @@
+if post.sticky || post.bumplocked || post.locked || post.cyclic
+	span.post-icons
+		if post.sticky
+			img(src='/img/sticky.png' height='14' width='14' title='Sticky')
+			| 
+		if post.bumplocked
+			img(src='/img/bumplock.png' height='14' width='14' title='Bumplocked')
+			| 
+		if post.locked
+			img(src='/img/lock.png' height='14' width='14' title='Locked')
+			| 
+		if post.cyclic
+			img(src='/img/cyclic.png' height='14' width='14' title='Cyclic')
+			| 
+

views/includes/postmods.pug

@@ -1,12 +0,0 @@
-if post.sticky 
-	img(src='/img/sticky.png' height='12' width='12' title='Sticky')
-	| 
-if post.bumplocked
-	img(src='/img/bumplocked.png' height='12' width='12' title='Bumplocked')
-	| 
-if post.locked 
-	img(src='/img/locked.png' height='12' width='12' title='Locked')
-	| 
-if post.cyclic 
-	img(src='/img/cyclic.png' height='13' width='13' title='Cyclic')
-	| 

views/mixins/catalogtile.pug

@@ -2,7 +2,7 @@ mixin catalogtile(board, post, index)
 	.catalog-tile(data-board=post.board data-post-id=post.postId data-user-id=post.userId)
 		- const postURL = `/${board._id}/thread/${post.postId}.html#${post.postId}`
 		.post-info
-			include ../includes/postmods.pug
+			include ../includes/posticons.pug
 			a.no-decoration.post-subject(href=postURL) #{post.subject || 'No subject'}
 			br 
 			span(title='Replies') R: #{post.replyposts}

views/mixins/post.pug

@@ -14,7 +14,7 @@ mixin post(post, truncate, manage=false, globalmanage=false, ban=false)
 					input.post-check(type='checkbox', name='checkedposts' value=post.postId)
 				| 
 				if !post.thread
-					include ../includes/postmods.pug
+					include ../includes/posticons.pug
 				if post.subject
 					span.post-subject #{post.subject}
 					|