{"id":7214,"date":"2022-01-24T17:47:05","date_gmt":"2022-01-24T14:47:05","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=7214"},"modified":"2024-03-08T19:28:47","modified_gmt":"2024-03-08T16:28:47","slug":"material-ui-icons-in-react","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/","title":{"rendered":"How to Use Material UI Icons In React"},"content":{"rendered":"<p>Are you looking for a way to give your <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/09\/top-articles-copy-600x450.png\"  data-excerpt=\"Here is our list of JS articles of 2019. We collected 17 posts with tricks and tips in JavaScript and its frameworks.\" href=\"https:\/\/flatlogic.com\/blog\/17-articles-of-september-2019-to-learn-javascript\/\">React<\/a> application an attractive visual appeal? Have you ever asked yourself how to install the Material UI Icon library? What are the best ways to use Material UI Icons? How can I make sure my icons are responsive and accessible? In this article, you will learn how to use Material UI Icons in React and make your app stand out.<\/p><p><a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Frame-43adfuuuuYYYYY-600x450.png\"  data-excerpt=\"What is better to use \u2013 Material UI or Bootstrap? It is a common question when you start working on a new project. Before we proceed to our list of top admin templates, let\u2019s look through the difference between these two design technologies. Bootstrap&#039;s widespread use in creating responsive web pages and applications comes with&hellip;\" href=\"https:\/\/flatlogic.com\/blog\/top-5-free-awesome-react-js-material-ui-admin-dashboard-templates\/\">Material UI<\/a> Icons have become increasingly popular for React developers, as they provide a great way to give their applications a modern and professional look. However, using Material UI Icons in React can be tricky, as there are a lot of features that need to be considered. For example, you need to ensure that the icons are accessible and responsive and that they are optimized for different screen sizes. The integration of Material UI Icons in React applications enhances the aesthetic and professionalism of <a href=\"https:\/\/flatlogic.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">business software<\/a>, necessitating careful consideration of accessibility, responsiveness, and optimization for various screen sizes to ensure a seamless user experience.<\/p><p>By reading this article, you will be able to confidently use Material UI Icons in your React applications. You will also gain an understanding of the best practices for using Material UI Icons, as well as learn how to make sure your icons are optimized and accessible. So let&#8217;s get started!<\/p><p><iframe data-src=\"\/\/www.slideshare.net\/slideshow\/embed_code\/key\/zvZsRwOow6i3wg\" width=\"594\" height=\"397\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:0px solid #CCC; border-width:0px; margin-bottom:0px; max-width: 100%;\" allowfullscreen=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"> <\/iframe><\/p><h3 class=\"wp-block-heading\" id=\"what-is\">What is Material UI<\/h3><p>Material UI is a React library based on Google&#8217;s <a href=\"https:\/\/en.wikipedia.org\/wiki\/Material_Design\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design<\/a>. Google introduced Material Design in 2014 and has since encouraged developers to use its guidelines. The benefits are smoother integration with Google services and a well-received &#8220;Googly&#8221; look that so many have grown to like. As you can assume, the Material UI library combines the pluses of Material Design with those of React. Those pluses include broad compatibility, easy development, and the ability to remove unnecessary features. The latter comes in handy since many frameworks tend to weigh the application down, and &#8220;shaking off&#8221; what you&#8217;re not using negates that to an extent. Keep reading about Material UI icons and you&#8217;ll know:<\/p><ul class=\"wp-block-list\"><li>What Material UI templates are<\/li><li>How we can use them with React<\/li><li>How to import Material UI templates<\/li><li>The best ways to use them in your project<\/li><\/ul> <a href=\"https:\/\/flatlogic.com\/generator\"><img decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png\" alt=\"Professional Vibe Coding\" class=\"banner-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/640;\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png 2560w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-600x150.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1024x256.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-768x192.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1536x384.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-2048x512.png 2048w\" data-sizes=\"auto\" data-original-sizes=\"(max-width: 2560px) 100vw, 2560px\"> <\/a><h2 class=\"wp-block-heading\" id=\"how-to\"><strong>What Is Material UI Icons and How to Use Them<\/strong><\/h2><p><br>Material UI Icons, serving as intuitive shortcuts for commands, operations, and navigation in applications, play a vital role in enhancing the user interface of <a href=\"https:\/\/flatlogic.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">business software<\/a>, streamlining user interactions through visually coherent and easily recognizable symbols. They can also be used to represent frequent operations and savings, and are usually placed in applications and\/or toolbars. Such Icons are used to create an easy shortcut to any action on the site or in the app, as well as allowing to replace long word descriptions with an easily understandable icon for a user. Material UI Icons mainly consist of two components: SvgIcon and Icon.<\/p><p>When it comes to Material UI Icons, the SVG component serves as the SVG path child and converts it into a React component. This React component allows you to customize the icon&#8217;s style and the reaction it makes after a click. It should also be mentioned that the size of said Icon should be 24&#215;24 pixels, but we are getting ahead of ourselves. The second component, which is the Icon component, is there to display an icon from any ligature-enabled icon font.<\/p><h4 class=\"wp-block-heading\" id=\"react-fit-in\">Where does React fit in?<\/h4><p>&#8220;What does it all have to do with React?&#8221; &#8211; you might ask. The answer is quite simple: you can also use them when creating a project with React&#8217;s help, which is good because it allows you to keep this task in your line of focus without a need to switch. And there are even no pitfalls, as the pack is ready to use. However, it should be said that Material UI Icons are not a be-all and end-all of UI Icons, as there are plenty of other packs on the market. <\/p><p>So, why choose it? In our opinion, you should choose them, because they are slick, stylish, minimalistic, and are supported by all major platforms, as well as browsers. But the best part is that they were created by Google. And this mastodon of a corporation knows a thing or two about creating site components.<\/p><p>So, there you have it. Now, let&#8217;s take a closer look at the process of creating and using said icons in your project.<\/p><h2 class=\"wp-block-heading\" id=\"import\"><strong>How to import a React Material UI icon for your project<\/strong><\/h2><p>So, let&#8217;s say you are creating a website for your awesome project and you want to make it more colorful, vibrant, and, dare we say it, more internationally accessible. That&#8217;s where Material UI Icons can come to your rescue, as they tick all of the upper-mentioned boxes. So, first of all, here&#8217;s a little guide to how you can add the ready-made Material UI Icons to your project.<\/p><p><strong>Step 1. Installing Material UI framework.<\/strong> First and foremost, install the Material UI framework to work with its components. To do so, add one of the following command lines, depending on whether you do it with npm or yarn, into your project:<\/p><pre class=\"wp-block-code\"><code>npm install @material-ui\/core<\/code><\/pre><pre class=\"wp-block-code\"><code>yarn add @material-ui\/core<\/code><\/pre><p><strong>Step 2. Installing Material UI Icons.<\/strong> The next step here would be to install the icons themselves into the project&#8217;s catalog. Once again, there are two ways to do it: through yarn or npm:<\/p><pre class=\"wp-block-code\"><code>npm install @material-ui\/icons<\/code><\/pre><pre class=\"wp-block-code\"><code>yarn add @material-ui\/icons<\/code><\/pre><p>These components use the Material UI SvgIcon component we have mentioned above to render SVG paths for every icon. This, in order, constitutes peer dependency on the next Material-UI release.<\/p><p><strong>Step 3. Importing Material UI Icons.<\/strong> After the installation of the Material UI Icons into your project&#8217;s catalog, your next step would be to import them by using one of the following two methods:<\/p><p><em>Method #1. <\/em>This option would be safer than the second one, also it somewhat restricts the creative potential of the developer&#8217;s experience<em>:<\/em><\/p><pre class=\"wp-block-code\"><code>import AccessAlarmIcon from '@material-ui\/icons\/AccessAlarm';<\/code><\/pre><pre class=\"wp-block-code\"><code>import ThreeDRotation from '@material-ui\/icons\/ThreeDRotation';<\/code><\/pre><p><em>Method #2. <\/em>This option is less safe, but, on the other hand, allows an experienced developer more creative freedom<em>:<\/em><\/p><pre class=\"wp-block-code\"><code>import { AccessAlarm, ThreeDRotation } from '@material-ui\/icons';<\/code><\/pre><p>By using one of these methods, we&#8217;ve imported Access Alarm and 3D Rotation icons into our project and you will be able to see them next time you boot up your project in their default variation. But keep in mind, that all of the icons in the Material UI framework have five different variations:<\/p><ul class=\"wp-block-list\"><li>Filled variation (the default option);<\/li><li>Outlined variation;<\/li><li>Rounded variation;<\/li><li>Twotone variation;<\/li><li>And Sharp variation.<\/li><\/ul><p>So, if you want to use any of these variations, you would need to append the theme name to the icon name. Also keep in mind that while Material Design icons use &#8220;snake_case&#8221; naming, @material-ui\/icons use &#8220;PascalCase&#8221; for the naming.<\/p><p><strong>Step 4. Adding CSS to Material UI Icons to change styles. <\/strong>Let&#8217;s assume that your project has its own YouTube channel and you would like to add the link to it to your site. Adding the full link would look rather unfitting on any site, so, using a Material UI icon of YouTube would be a fit here. And let&#8217;s also assume that for stylistic reasons you want it to be in red and white, just as the original logo. In that potential situation, your next step would be to add CSS to your icon to make it appear the way you need. Your specific next move would be as follows:<\/p><pre class=\"wp-block-code\"><code>import React, { Component } from 'react' import YouTubeIcon from '@material-ui\/icons\/YouTube'; export class Maticon1 extends Component {  render() {  return (  &lt;div&gt;  &lt;AppBar className=\"mrg\" position=\"static\"&gt;  &lt;Toolbar&gt;  &lt;div style={{ 'paddingLeft': \"600px\" }}&gt; Material UI Social media Icons&lt;\/div&gt;  &lt;\/Toolbar&gt;  &lt;\/AppBar&gt;  &lt;YouTubeIcon style={{ 'color': \"red\" }}\/&gt;&lt;br&gt;&lt;\/br&gt;  &lt;\/div&gt;  )  }  }  export default Maticon1 <\/code><\/pre><p>In this example, Maticon1 is the component where we add social media icons. After that, don&#8217;t forget to add a reference to this component in the app.js file by doing the following:<\/p><pre class=\"wp-block-code\"><code>import React from 'react'; import logo from '.\/logo.svg'; import '.\/App.css'; import Maticon1 from '.\/Maticon1'  function App() {  return (  &lt;div className=\"App\"&gt;  &lt;Maticon1\/&gt;  &lt;\/div&gt;  ); }  export default App;<\/code><\/pre><p>And, the next time you run your project you will see a beautiful small Material UI Icon of YouTube in red and white.<\/p><p>But what if you need an icon that is not in the default set of Material UI Icons? Well, in that case, the SvgIcon wrapper we&#8217;ve already mentioned above would come to your rescue. It allows you to create custom SVG icons by extending the native &lt;svg&gt; element. Bear in mind that all the SVG elements should be scaled for a 24&#215;24 pixels viewport. This way the resulting icon would be available to use as a child for other Material UI components that themselves use the icons and would be available for customization with the <em>viewBox<\/em> attribute. You would also be free to apply any of the theme colors by using the <em>color<\/em> prop, as by default all the components inherit the current color. The code for customization would look the following way:<\/p><pre class=\"wp-block-code\"><code>function HomeIcon(props) { return ( &lt;SvgIcon {...props}&gt; &lt;path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\" \/&gt; &lt;\/SvgIcon&gt; );} And the code for color setting would look the following way:\u00b7 &lt;div className={classes.root}&gt;&lt;HomeIcon \/&gt;&lt;HomeIcon color=\"primary\" \/&gt;&lt;HomeIcon color=\"secondary\" \/&gt;&lt;HomeIcon color=\"action\" \/&gt;&lt;HomeIcon color=\"disabled\" \/&gt;&lt;HomeIcon style={{ color: green&#91;500] }} \/&gt;<\/code><\/pre><p>And, after adding these lines, your icons will look the following way:<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh5.googleusercontent.com\/pnxDoTe6NCKDo6yc4ftbMk7yhXszItN3yFLTAXYbY00LLvyhoSLEeXplC-rdNQTI0Mr40jh4Qxg44qltBq9TdQSAQIdQpBGiznLgadS2cjQoKdasMPLhq_u4zbbhSe6sosKuTtas\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><p>That is how you install and customize your Material UI Icons. Feel free to wield this power to decorate your project with all sorts of beautiful icons and somewhat secretly enrich your end-user&#8217;s experience with it.<\/p><h3 class=\"wp-block-heading\" id=\"about-flatlogic\">About Flatlogic Platform<\/h3><p>In this article, we&#8217;ve talked about Material UI icons and how to use them in React. Icons are an integral part of what differentiates your website from competitors. They take up a small portion of the website&#8217;s face but command a great deal of the user&#8217;s attention. If you want to create your Apps by hand, this guide will help you a great deal. If saving time is of greater priority to you than individual design, there&#8217;s another path you could choose.<\/p><h2 class=\"wp-block-heading\" id=\"creating\">Creating web Applications with Flatlogic<\/h2><p>Some Apps have unique, unpopular functionality we have to craft by hand. But those Apps are as rare and unique as the functions they perform. Most apps have more similarities than differences. Most web Apps&#8217; basic functions are Creating, Reading, Updating, and Deleting Data. Just like the basic functions, many components and parts of an App can be categorized and replicated. We followed this line of thought and built the Flatlogic Platform to help you create React Apps without hiring a whole team of developers and with little to no special expertise. App creation with Flatlogic consists of a few choices. Let&#8217;s see what they are!<\/p><h3 class=\"wp-block-heading\" id=\"one\">#1: Choose a name<\/h3><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"399\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_1-4-1024x399.png\" alt=\"Pick a name for your project. This will help you know which project is which if you start another one.\" class=\"wp-image-9851 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_1-4-1024x399.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_1-4-600x234.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_1-4-768x300.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_1-4-1536x599.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_1-4.png 1600w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/399;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>First off, you choose a name for your project. If you have to create another project soon, you&#8217;ll need to differentiate between the two, so choose wisely!<\/p><h3 class=\"wp-block-heading\" id=\"two\">#2: Choose stack<\/h3><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"401\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_2-4-1024x401.png\" alt=\"A web App's stack is the combination of technologies used for the front-end, the back-end, and the database.\" class=\"wp-image-9852 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_2-4-1024x401.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_2-4-600x235.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_2-4-768x300.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_2-4-1536x601.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_2-4.png 1600w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/401;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>A complete App consists of the database, the front end, and the back end that mediates between the two. We choose the underlying technologies for each part. Any combination will work fine but depending on the resources your App will operate with, some options might have additional benefits. So, a quick research of what works well with React, Vue, or another option you choose will do you good.<\/p><h3 class=\"wp-block-heading\" id=\"three\">#3: Choose the Design<\/h3><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"400\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_3-4-1024x400.png\" alt=\"Choose the admin panel's design. Take a look at the selection of design patterns and pick the one you like the most.\" class=\"wp-image-9853 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_3-4-1024x400.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_3-4-600x234.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_3-4-768x300.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_3-4-1536x600.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_3-4.png 1600w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/400;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>If you&#8217;re creating an admin dashboard, the visual part may be of lower priority than other parts. Still, you&#8217;ll likely look at the panel for hours on end, so choose carefully! It might have a heavy impact on your productivity.<\/p><h3 class=\"wp-block-heading\" id=\"four\">#4: Choose Database Schema<\/h3><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"479\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_4-4-1024x479.png\" alt=\"The schema is the structure of your database. It defines fields, columns, types of data, and the way they interact with each other.\" class=\"wp-image-9854 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_4-4-1024x479.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_4-4-600x281.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_4-4-768x359.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_4-4-1536x718.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_4-4.png 1600w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/479;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>We can visualize a database&#8217;s structure as a spreadsheet. A spreadsheet has two dimensions with lines and columns crossing to represent a field with two distinct parameters. If we were to picture databases similarly, some would have three or even more dimensions, each one representing a relevant parameter. The parameters we need, the type of data they consist of, and how they relate to each other are the things that comprise a database schema. This part is perhaps the trickiest since it requires a thorough understanding of the data your App will process.<\/p><h3 class=\"wp-block-heading\" id=\"five\">#5: Review and Generate<\/h3><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"399\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_5-4-1024x399.png\" alt=\"Review your choices. If everything is the way you want it to be, hit &quot;Create App&quot;. After a brief compilation your App will be ready.\" class=\"wp-image-9855 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_5-4-1024x399.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_5-4-600x234.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_5-4-768x299.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_5-4-1536x598.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/01\/Screenshot_5-4.png 1600w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/399;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>The choices have been made. It&#8217;s time to check them and (assuming everything&#8217;s in place) hit &#8220;Create App&#8221; After compiling for a while (usually a few minutes), your Application will be complete. At this point, you can connect it to your API&#8217;s data endpoints and use it. You can push it to GitHub or host it without outside services, both in one click. Enjoy!<\/p><h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2><p>Icons are small parts of an App by the screen space they occupy but not by their importance. They help us navigate the interface without spending time reading. They help project an idea or a vision in a clear and concise form. Material UI icons are easy to integrate into React, customize, and shape to your needs. It makes Material UI Icons a must-try for any project development.<\/p><p>And that is all for today. We wish you a happy day, filled with small pleasant things to enjoy. And, as always, feel free to read up on any other of our articles. Until next time!<\/p><h2 class=\"wp-block-heading\" id=\"suggested\"><strong>You might also like these articles<\/strong><\/h2><ul class=\"wp-block-list\"><li><a href=\"https:\/\/flatlogic.com\/blog\/12-react-boilerplates-and-starter-kits-for-developers-in-2021\/\"><\/a><a href=\"https:\/\/flatlogic.com\/blog\/top-20-react-website-templates-for-react-developers-free-and-premium\/\">Top 20 Best React Website Templates for React Developers [Free and Premium]<\/a><\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/best-react-open-source-projects\/\"><\/a><a href=\"https:\/\/flatlogic.com\/blog\/best-10-ides-for-react-js-for-2021\/\">Best 10 IDEs for React.js for 2021<\/a><\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/vue-vs-react-what-is-easier-what-is-trending-detailed-guide-with-all-2021\/\">React vs. Vue: What Is Easier? What Is Trending? Detailed Guide With All +\/- [2021]<\/a><\/li><\/ul>","protected":false},"excerpt":{"rendered":"<p>The focus of our this article &#8211; Material-UI Icons, might very easily seem unimportant, but it is most definitely not. <\/p>\n","protected":false},"author":13,"featured_media":7265,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"flatlogic_tldr":"Install @material-ui\/core and @material-ui\/icons via npm or yarn.\nImport icons individually or as named imports; choose from Filled, Outlined, Rounded, TwoTone, or Sharp.\nCustomize icons with CSS and props; SVG icons use a 24x24 viewport and support theme colors.\nCreate custom icons with SvgIcon and ensure accessibility and responsiveness.","flatlogic_facts":[{"text":"Material UI icons render in a 24x24 px viewport for consistency.","source":""},{"text":"Install Material UI with: npm install @material-ui\/core and npm install @material-ui\/icons.","source":""},{"text":"Icon variants include Filled (default), Outlined, Rounded, TwoTone, and Sharp.","source":""},{"text":"Import per icon (default import) or via named imports from @material-ui\/icons.","source":""},{"text":"Create custom icons with SvgIcon; color prop supports primary, secondary, action, and disabled.","source":""}],"footnotes":""},"categories":[28],"tags":[98,452,35,540],"class_list":["post-7214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","tag-material-ui","tag-material-ui-templates","tag-reactjs","tag-reactjs-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use Material UI Icons In React - Flatlogic Blog<\/title>\n<meta name=\"description\" content=\"React Material-UI icons is a package with more than 1100 SvgIcon components. You can find ready to use icons on the official site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Material UI Icons In React\" \/>\n<meta property=\"og:description\" content=\"React Material-UI icons is a package with more than 1100 SvgIcon components. You can find ready to use icons on the official site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Flatlogic Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flatlogic\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-24T14:47:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-08T16:28:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/07\/Frame-2502sdgf.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1044\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alexander Rubanau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/07\/Frame-2502sdgf.png\" \/>\n<meta name=\"twitter:creator\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:site\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexander Rubanau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use Material UI Icons In React - Flatlogic Blog","description":"React Material-UI icons is a package with more than 1100 SvgIcon components. You can find ready to use icons on the official site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Material UI Icons In React","og_description":"React Material-UI icons is a package with more than 1100 SvgIcon components. You can find ready to use icons on the official site.","og_url":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/","og_site_name":"Flatlogic Blog","article_publisher":"https:\/\/www.facebook.com\/flatlogic","article_published_time":"2022-01-24T14:47:05+00:00","article_modified_time":"2024-03-08T16:28:47+00:00","og_image":[{"width":2000,"height":1044,"url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/07\/Frame-2502sdgf.png","type":"image\/png"}],"author":"Alexander Rubanau","twitter_card":"summary_large_image","twitter_image":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/07\/Frame-2502sdgf.png","twitter_creator":"@flatlogic","twitter_site":"@flatlogic","twitter_misc":{"Written by":"Alexander Rubanau","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/#article","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/"},"author":{"name":"Alexander Rubanau","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/fe11946e6132bd7996319a70e21dc189"},"headline":"How to Use Material UI Icons In React","datePublished":"2022-01-24T14:47:05+00:00","dateModified":"2024-03-08T16:28:47+00:00","mainEntityOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/"},"wordCount":2130,"commentCount":0,"publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/07\/Frame-2524aF.png","keywords":["Material UI","Material UI Templates","React","React.js Tutorials"],"articleSection":["Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/","url":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/","name":"How to Use Material UI Icons In React - Flatlogic Blog","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/#primaryimage"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/07\/Frame-2524aF.png","datePublished":"2022-01-24T14:47:05+00:00","dateModified":"2024-03-08T16:28:47+00:00","description":"React Material-UI icons is a package with more than 1100 SvgIcon components. You can find ready to use icons on the official site.","breadcrumb":{"@id":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/#primaryimage","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/07\/Frame-2524aF.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/07\/Frame-2524aF.png","width":1600,"height":1200},{"@type":"BreadcrumbList","@id":"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flatlogic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use Material UI Icons In React"}]},{"@type":"WebSite","@id":"https:\/\/flatlogic.com\/blog\/#website","url":"https:\/\/flatlogic.com\/blog\/","name":"Flatlogic Blog","description":"Vibe-coding, AI Agents, Professional Software Development Services, Case Studies and More","publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"alternateName":"Flatlogic Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flatlogic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/flatlogic.com\/blog\/#organization","name":"Flatlogic","url":"https:\/\/flatlogic.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","width":970,"height":257,"caption":"Flatlogic"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flatlogic","https:\/\/x.com\/flatlogic","https:\/\/www.instagram.com\/flatlogiccom\/","https:\/\/www.linkedin.com\/company\/flatlogic\/"]},{"@type":"Person","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/fe11946e6132bd7996319a70e21dc189","name":"Alexander Rubanau","sameAs":["At Flatlogic, Alexander is deeply involved in the issues of enhancing and maintaining Flatlogic marketplace products and web app builder. He also supervises the state of Flatlogic marketplace products. Alexander is an experienced front-end developer; part-time programming lecturer; and deserves the title of software quality fanatic. Outside his working hours, he is a photographer, video maker and a dedicated father of two lively kids!"],"url":"https:\/\/flatlogic.com\/blog\/author\/alexsandr\/"}]}},"_links":{"self":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/7214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/comments?post=7214"}],"version-history":[{"count":25,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/7214\/revisions"}],"predecessor-version":[{"id":15297,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/7214\/revisions\/15297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media\/7265"}],"wp:attachment":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media?parent=7214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/categories?post=7214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/tags?post=7214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}