I have the following code in my layout:

// Fontawesome
import { config, library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab)
config.autoAddCss = true;

I my component I am doing the following:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

// code
<a href="/onboarding/interests" className="px-10 py-3 mt-16 text-lg text-white bg-[#2967BC] rounded-lg hover:bg-[#004182]">
              <span className="flex items-center font-display">
                <FontAwesomeIcon icon="fa-brands fa-linkedin" size="2x" />
                <span className="ml-2">Sign in with LinkedIn</span>
              </span>
            </a>

When I try to change the size attribute the size change does not reflect.

Is there a way I can control this via tailwind utility classes?