Neutral Political Machine

    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    React Loading Icons

    npm version Unit Test CI codecov Integration Test CI

    A pure SVG zero-dependency React adaptation of Sam Herbert's SVG Loaders library.

    Built with React 17 and TypeScript. Check out the Demo!

    Also works with JavaScript, of course (supports ESM tree shaking).


    Install from NPM

    yarn add react-loading-icons
    npm install react-loading-icons

    Import all the loaders in a namespaced fashion

    You can import all the loaders at once:

    import LoadingIcons from 'react-loading-icons'

    and use them in a namespaced manner:

    <LoadingIcons.Bars />

    Import an individual loader

    You can also import a single loader:

    import { Bars } from 'react-loading-icons'

    and use it without any fancy namespacing:

    <Bars />

    You can even go as far as copying over a single .js file from the dist/components directory to your project — this way you can directly import a certain loading icon without having to import the whole package.


    <Audio />
    <BallTriangle />
    <Bars />
    <Circles />
    <Grid />
    <Hearts />
    <Oval />
    <Puff />
    <Rings />
    <SpinningCircles />
    <TailSpin />
    <ThreeDots />


    Each of these components will accept any SVG tag presentation attributes as well as all valid JSX properties (key, onClick, …) as props. Animation speed can be controlled via speed attribute (1 = 100% speed, .5 = 50% speed, 2 = 200%, and so on). The components are also smart about inheriting fill, fillOpacity, stroke, strokeOpactiy and strokeWidth, so these can also easily be controlled.

    Common Usage

    // renders the Puff icon with a mint green stroke
    <Puff stroke="#98ff98" />
    // renders the Puff icon's mint green stroke with an opacity of 12.5%
    <Puff stroke="#98ff98" strokeOpacity={.125} />
    // renders the Puff icon at 75% speed with a mint green stroke with an opacity of 12.5%
    <Puff stroke="#98ff98" strokeOpacity={.125} speed={.75} />


    npm i react-loading-icons

    DownloadsWeekly Downloads






    Unpacked Size

    166 kB

    Total Files


    Last publish


    • dkress59