I Fixed Font Awesome JavaScript Logo

Ciprian on Wednesday, September 30, 2020 in Blog
Last modified on Monday, May 16, 2022

#f7df1e

#000000

The JavaScript logo colours are yellow (#f7df1e) and black (#000000).

Font Awesome SVG Icon

The problem with the Font Awesome JavaScript logo is that the abbreviation (the JS letters) is hollow, so it cannot be styled. The letters should be black.

While there are alternatives, such as CSS pseudo-elements, the best option is still a clean SVG. If you are using Font Awesome, here is the (unoficially) updated icon:

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-js fa-fw fa-w-14" data-icon="js" data-prefix="fab" viewBox="0 0 448 512">
    <defs/>
    <path fill="#000000" d="M0 32v448h448V32H0z"></path>
    <path fill="#f7df1e" d="M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"/>
</svg>

Standalone SVG Icon

Here’s a proper SVG using the correct colours and shapes:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
    <defs/>
    <path fill="#f7df1e" d="M0 0h630v630H0z"/>
    <path d="M165.7 526.5l48.2-29.2c9.3 16.5 17.7 30.4 38 30.4 19.5 0 31.7-7.6 31.7-37.2V289.2h59.2v202.2c0 61.3-35.9 89.2-88.3 89.2-47.4 0-74.9-24.5-88.9-54.1M375 520.1l48.2-27.9c12.7 20.7 29.2 36 58.4 36 24.5 0 40.1-12.3 40.1-29.2 0-20.3-16-27.5-43-39.3l-14.9-6.4c-42.7-18.2-71-41-71-89.2 0-44.4 33.8-78.3 86.7-78.3 37.6 0 64.7 13.2 84.1 47.4l-46 29.6c-10.2-18.2-21.2-25.4-38.1-25.4-17.4 0-28.4 11-28.4 25.4 0 17.8 11 25 36.4 36l14.8 6.3c50.3 21.6 78.6 43.6 78.6 93 0 53.3-41.8 82.5-98 82.5-55 0-90.6-26.2-107.9-60.5"/>
</svg>

Here’s a comparison between the two logos (Font Awesome is on the left, while the proper one is on the right). Notice a slight border on the Font Awesome one.