We’re happy to announce our Obra Icons Framer plugin got approved by the Framer.

You can find the plugin at the Framer marketplace.

To use the plugin, click the Framer icon, then go to Plugins, click Browse all… and start typing Browse plugins. Once you’ve opened the plugin once, you can launch the plugin via the Plugins menu.

Alternatively, click the Plugins icon at the bottom of the floating toolbar. Navigate to Browse all… and search for “Obra Icons”.

This is a first version. We’re going to be improving the plugin as we move forward.

We recently merged Evert’s pull request that optimizes the way we build packages and implemented a Vue package as well.

This led to the first release of the Obra Vue package. You can find it on npm as obra-icons-vue. All Obra Icons versions are tagged with similar version numbers so you know which icons are available in which. This is why this version, even though it’s the first version, is already 1.23.2.

We are currently looking into expanding the surface area where Obra Icons can be used. A public project briefing is available on this Notion website.

The Obra icons monorepo is now open source. You can find the repository here.

There’s a lot of interesting stuff in this pnpm-powered monorepo: this very website, tools we use to develop Obra Icons, the source code for the different packages (React and Svelte)… in general, we are open to contributions, but we should probably explain a bit how things work and make it easier to contribute.

Right now, to be able to run the project completely, you will need your own OpenAI key as well as a Figma API key and access to the source Figma file. I plan to make a video about this. If you’re curious, ask on Discord and you might trigger me to get started!

We will need to explain how the dev tools work, what our quality standards are. And also what the plans are for Obra Icons 2.0. The project will likely be in a phase of having little docs, but still being open source for a while.

We’ll hopefully get to that at some point. Right now we are promoting our brand new shadcn/ui kit.

We posted a version of the icons that you could use to design your projects here on Figma community. This file tracks the latest development version and contains all 1048 icons.

There is more to do for us: add keywords, create Figma components out of the icons… but for now, this could already help you forward if you design with Obra Icons.

Obra Icons is now open source! We’ve removed the purchase options to purchase the source files from the website; and we’ve changed the licensing agreement to the MIT license. Free icons for all!

Our Figma plugin for Obra Icons now also supports Figma Slides.

You can find the Obra Icons plugin here.

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.