Astra Icons

Getting Started

Begin by installing @astraicons/react from npm:

npm install @astraicons/react

Then import each icon individually as a React component:

import { GlobalIcon } from "@astraicons/react/linear";

function MyComponent() {
  return (
    <div>
      <GlobalIcon className="size-6 text-blue-500" />
      <p>...</p>
    </div>
  );
}

The 24x24 linear icons can be imported from @astraicons/react/linear, the 24x24 bold icons from @astraicons/react/bold, and the 24x24 brand icons from @astraicons/react/brand.

Icons are named using upper camel case and always end with Icon.

View the full list of icon names on UNPKG →

Contributing

While we welcome contributions to enhance the project, our current focus is on resolving issues like incorrect TypeScript types or improperly exported icons.

Please note that we are not accepting contributions for new icons.

Credit

This project uses parts from the HeroIcons library from TailwindLabs.

License

This library is released under the MIT license.