Skip to content

jasonmelgoza/metal-icons

Repository files navigation

Metal Icons Banner

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

License

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

See LICENSE for more information.