Clarity

Clarity is pretty neat, offering four cool color themes to choose from. Here’s the lowdown on each one:

Available Color Themes

• Caeruleus: Blue gradient


• Canus: Grey gradient (this one's the default)


• Luteus: Orange gradient


• Violaceus: Violet/pink gradient


• Viridis: Green

You’ll notice that every icon is built from a single path and a template in SVG format. It's super easy to create your own template, and you can see how the default ones are set up. The great part? You can use all the power of SVG to craft your theme!

Changing Themes Made Simple

If you want to switch up the color theme of your icons, just type this command:

make name_of_a_theme

If you're curious about all the themes available, simply type:

make

This will give you a list of all color themes you can play around with!

Create Your Own Icons with Custom Templates

If you decide to change a theme or create your own (you’d do this in the file called src/template_your_name.svg), just type this:

./configure

make your_name

The script will then build icons based on your custom template.

Your Template Design Needs Some Marks!

Your template should be an SVG file that has two specific marks: {{TITLE}} and {{PATH}}. Icons get created by replacing {{PATH}} with the value of the 'd' attribute from the first path in the SVG file located in the src directory.

Edit Icon Sources Easily!

You’re also free to change up the source for icons since they are SVG files featuring a single path.

If you're excited about trying out Clarity and want to download it now, check it out here: This link will take you there!