title: FontAwesome spinner won't spin in React
body: <p>I created a React application with <code>npx create-react-app</code>.</p>
  <p>Then following these instructions</p>
  <p><a href="https://fontawesome.com/how-to-use/on-the-web/using-with/react" rel="noreferrer">https://fontawesome.com/how-to-use/on-the-web/using-with/react</a></p>
  <p>I installed the Font Awesome dependences:</p>
  <pre><code>npm i @fortawesome/fontawesome-svg-core
  npm i @fortawesome/free-solid-svg-icons
  npm i @fortawesome/react-fontawesome
  </code></pre>
  <p>Then I changed the <code>App.js</code> to this:</p>
  <pre><code>import logo from './logo.svg';
  import './App.css';
  import { FaSpinner } from 'react-icons/fa';
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
            &lt;FaSpinner icon=&quot;spinner&quot; spin /&gt; This is a test.
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>But it only displays a spinner icon that is not spinning:</p>
  <p><a href="https://i.stack.imgur.com/Rsuyz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Rsuyz.png" alt="enter image description here" /></a></p>
  <p>How do I get the spinner to spin?</p>
  <h1>NOTE:</h1>
  <p><strong>Outside of React</strong>, Font Awesome works fine without doing any extra work to animate the icons, e.g. this simple HTML code shows an animated icon:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot;
            type=&quot;text/css&quot;
            href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot; /&gt;
      &lt;title&gt;testspin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;i class=&quot;fa fa-spinner fa-spin&quot;
         aria-hidden=&quot;true&quot;&gt;&lt;/i&gt; 
  This is a test
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>What do I need to do in order to get the React version to work this easily?</p>