Designers work with software that manipulate visuals, but web visuals often consist of unfriendly blobs of SVG code. I'm working to create intuitive UI to manage these code blobs visually.
Copy and Paste Icons
I recently launched a web tool that allows users to copy and paste icons into HTML, CSS, and even Adobe Illustrator.
I originally designed the UI for desktop, but it didn't work well on mobile devices, so I designed specifically for mobile. The mobile and tablet UI experience were drastically improved, while the desktop still worked well with a clean and minimalist design as a result. You can modify color, size, and the output method.
There are three output options. One is inline SVG which can be pasted into HTML code and work as is, or directly into Adobe Illustrator. Alternatively, there is a pure CSS code version that works, but an HTML element with its class. Lastly, the icon can be saved and downloaded as an SVG file. Each method is optimized to reduce code and/or filesize.
The Icon Design
I created two sets of icons for this icon web tool called Indie Icons and Splash Icons.
Indie Icons consists of 200+ solid icons built in a 24x24px space, ideal for user interfaces. Splash Icons is a set of 150 two-tone icons that works well with integrating brand colors and is built in a 48x48px grid. I used Splash Icons on the bottom navigation of this portfolio website.
Web Tools in Progress
I have plans to produce a few more creative tools including a pattern maker, a color palette picker, and a vector texture generator.
Releasing tools like this is a big undertaking for one person, so I'm tackling one project at a time. To the right are a collection of patterns I've created in preparation for the pattern tool I will be making.
