jasonmelgoza / metal-icons

A flexible and simple set of icons

Metal Icons

A versatile collection of icons designed for your next Figma or React project.

Goals

• Design an icon set with two base sizes: 16px and 24px, providing an outline and a solid version of each.
• Provide an optimized set of SVG icons.
• Craft a user-friendly and intuitive Figma component library.
• Build an easy-to-use JavaScript icon library for React projects.

Getting Started

React

First, install metal-icons in your project using your preferred JS package manager.

yarn add metal-icons

Then, import an icon from the metal-icons library at the beginning of a component and then utilize it in the render function.

import { FolderIcon } from `metal-icons/16/solid`

export default function MyComponent() {
  return (
    <button>
      <FolderIcon />
      Add Folder
    </button>
  )
}

The 16px outline icons can be imported from metal-icons/16/outline, and the solid ones can be imported from metal-icons/16/solid. Similarly, the 24px outline icons can be imported from metal-icons/24/outline, and the solid variant can be imported from metal-icons/24/solid.

Figma

The Figma Metal-Icons component library is ready to be imported, with both sizes and variants readily available.

Open in Figma

Inspiration

• Feather by Cole Bemis
• Heroicons by Tailwind Labs
• Material Icons by Google Design

License

Licensed under the MIT License. Copyright © 2023-present Jason Melgoza.

See LICENSE for more information.