Obsidian Tasks Custom Status Icons CSS Snippet

keiths-obsidian-custom-statuses.css

/* [w] waiting */
input[data-task="w"], 
li[data-task="w"] > input,
li[data-task="w"] > p > input {
	&:checked {
		color:var(--color-orange);
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%228%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20fill%3D%22none%22/%3E%3Cline%20x1%3D%2210%22%20y1%3D%2210%22%20x2%3D%2210%22%20y2%3D%225%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2210%22%20y1%3D%2210%22%20x2%3D%2213%22%20y2%3D%2210%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
	}
}

/* [d] deferred */
input[data-task="d"], 
li[data-task="d"] > input,
li[data-task="d"] > p > input {
	&:checked {
		color:var(--color-orange);
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20points%3D%222%2C4%209%2C10%202%2C16%22%20fill%3D%22currentColor%22/%3E%3Cpolygon%20points%3D%229%2C4%2016%2C10%209%2C16%22%20fill%3D%22currentColor%22/%3E%3C/svg%3E");
	}
}

/* [b] blocked */
input[data-task="b"], 
li[data-task="b"] > input,
li[data-task="b"] > p > input {
	&:checked {
		color:var(--color-orange);
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20points%3D%227%2C1%2013%2C1%2019%2C7%2019%2C13%2013%2C19%207%2C19%201%2C13%201%2C7%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22/%3E%3Crect%20x%3D%225%22%20y%3D%229%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22currentColor%22/%3E%3C/svg%3E");
	}
}

I made a few icons for Obsidian task custom statuses that I wanted to use in my vault for work:

- [b] - Blocked (stop sign)
- [w] - Waiting (clock)
- [d] - Deferred (fast forward)

I use the Minimal theme for Obsidian, but not sure that it matters.

Installing is as simple as adding to the Obsidian snippets folder and enabling the snippet.

Customizing the status character or color is just a matter of editing the snippet.