shisa.vercel.app

Overview

Shisa is a personal set of custom icons that I designed to be simple and visually appealing. The name “Shisa” comes from the Japanese word “示唆” which means “suggestion” or “hint”. The icons are intended to hint actions or ideas to the user, allowing content to be quickly understood.

Creation Process

The icons were created using Figma in a 24 x 24 frame. Each icon was meticulously crafted with the intention to be simple and easy to understand, with a consistent stroke width and rounded corners.

But the process was not without its challenges. Some icons were difficult to design, and getting the right balance and spacing between the elements was a challenge. The settings icon in particular was difficult to design as it needed to be simple and recognizable at a small size. I was able to draw a gear icon by putting a larger 32 x 32 frame in the background and using it as a guide to pull the vector points to the right places.

The final icons were then exported as SVG files and readjusted in my text editor to ensure they could be resized using the font-size and recolored using the color property in CSS. This allows the icons to be easily styled and resized to fit the application’s design.

Usage

These icons are used in a variety of the applications that I have built, including Deizu and my portfolio site (this website). The benefit of owning a custom set of icons is that you can easily extend the general icons by adding custom icons specific to that application.

I have also made the icons available via npm (npm i shisa-icon) so that others can use them in their own projects. The icons are free to use and can be easily integrated into any React application.