We released a Figma plugin for Obra Icons. You can find it on the Figma community here.

The plugins contains 1000+ icons in 3 weights: 2px, 1.5px and 1px. You can use a slider to set the size, change the colour, and the plugin will remember your settings.

It includes the Obra Icons keyword search, where you can search icons not just by their name, but also by extensive extra keywords.

We added a React package to Obra Icons. Now it’s possible to use Obra Icons easily in a react context.

To install:

npm i obra-icons-react

To use (example on CodeSandbox):

import { IconAddRoundrect } from "obra-icons-react";

export default function App() {
	return (
		<div>
			<IconAddRoundrect strokeWidth={1} color="red" size={64}/>
		</div>
	);
}

With this change, we also provided the foundations to add more formats, for example a Vue package. If you would like to see Obra Icons in more formats, let us know!

Today I recorded another tutorial video, where we try to make a more advanced icon based on a reference.

The video from yesterday focuses on on some basics. At the end of the video we ended up with a document icon. This video focusses on the techniques needed to create a butterfly icon.

I want to apologize for the roughness of above videos, I am making them more for myself and as a reference to some people I am working with than an actual professionally produced tutorial. They are helping me to figure out what should be shown in a tutorial. As you can see in above video, sometimes when creating an icon, the struggle is real.

This new video goes through some more advanced technique techniques including

1. Joining vectors in vector mode
2. Changing the properties of vector points (mirrored curve)
3. How to enter outline mode
4. Pixel preview and snap to pixel

If you like this, leave a comment or give like to the video, so I know to make more videos like this.

I recorded a video where I show some basics on how to create icons in Figma, or at least how I do it.

This video goes through some basic techniques including

1. Working with keyshapes
2. Useful shortcuts
3. Pixel grid/align to pixel grid settings
4. Basics of the pen tool
5. Rounding of start and end points
6. Rounding of joins

If you think this is interesting, leave a comment or a like to the video, so I know to make more videos like this.

Fresh from the plugin press, this plugin by Vijay Verma provides some shortcuts to easily access important vector tools In Figma. This can help as a bit of a bandaid, since Figma’s UI team inexplicably decided to hide the vector tools behind extra clicks in UI3.

Welcome to the Obra Icons blog! We will be posting updates to the icon set, tips to design icons and more here.