SolvedSemantic UI React Icons are not displaying (fonts not loading in CRA)


Trying to use <Icon name="search" />, but no icons are displaying.

Expected Result

Icon should be displaying.

Actual Result

Icon are rendered as box.


"semantic-ui-react": "^0.79.1"
"semantic-ui-css": "^2.3.1",


created a codesandbox project here:

15 Answers

✔️Accepted Answer

@levithomason I had done a silly mistake. I tried to reproduce the issue by creating a basic project with CRA that just displays the Icon. It worked though.
So I checked my project thoroughly. What I did was, in order to replace the default font with Open Sans, I had used in my css:

* {
font-family: 'Open Sans';


Other Answers:

Thanks for the report.

Also, codesandbox seems to have an issue with their loaders for resolving fonts in CSS files. If you use an "external" dependency and add CSS sheet via a CDN it works:

Here's the original codesandbox updated to use a CDN which also now works:

More Issues: