{"id":1097,"date":"2022-07-14T10:50:53","date_gmt":"2022-07-14T10:50:53","guid":{"rendered":"https:\/\/iamvector.com\/blog\/?p=1097"},"modified":"2025-02-01T10:19:29","modified_gmt":"2025-02-01T10:19:29","slug":"the-complete-guide-on-using-icons-in-figma","status":"publish","type":"post","link":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/","title":{"rendered":"The Complete Guide On Using Icons in Figma"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Before_we_start_lets_go_through_the_various_types_of_icons\" >Before we start, let&#8217;s go through the various types of icons:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Setting_up_icons\" >Setting up icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Choose_an_icon_library\" >Choose an icon library<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Add_icons_in_your_Figma_file\" >Add icons in your Figma file<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Customize_icons\" >Customize icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Turn_into_Main_components\" >Turn into Main components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Using_icons\" >Using icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Add_swap_icon_instances\" >Add &amp; swap icon instances<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Apply_overrides\" >Apply overrides<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Developer_handoff\" >Developer handoff<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Export_icons\" >Export icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Spritesheet\" >Spritesheet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Icon_font\" >Icon font<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#Final_Thoughts\" >Final Thoughts:<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>Icons are an essential component of every design system. They are little, language-independent symbols that assist us in understanding and navigating digital things. Each one serves as a simple building block for more significant, complicated components. In this tutorial, we&#8217;ll go through how to create icons, use them in Figma, and pass them off to developers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1164\" height=\"600\" src=\"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2022\/07\/banner.png\" alt=\"Using Icons in Figma\" class=\"wp-image-1102\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Before_we_start_lets_go_through_the_various_types_of_icons\"><\/span><strong>Before we start, let&#8217;s go through the various types of icons:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Informational icons: <\/strong>These icons cannot be clicked. They describe or emphasize facts that the user should be aware of. They can be used to substitute words, emphasize a design, or make it more accessible.<br><\/li>\n\n\n\n<li><strong>Actionable icons:<\/strong> These icons are clickable and can be used to initiate an action. They have the ability to open, close, or navigate the user to a different destination.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setting_up_icons\"><\/span><strong>Setting up icons<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before you begin developing any other components of your design system, create an organized, consistent set of icons. This expedites your process, improves the consistency of your designs, and allows you to grow your website or product.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choose_an_icon_library\"><\/span><strong>Choose an icon library<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We recommend selecting a large, well-established icon collection for most online projects. Obscure icon libraries often offer a restricted collection and no support for icon fonts. And making your own icons takes a LOT of effort and talent.<\/p>\n\n\n\n<p>Here&#8217;s a list of well-known icon libraries that provide a big number of SVG icons, different fill\/stroke states, and font capabilities. Choose the one that best represents your brand.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Font Awesome: Website, Plugin, Font<\/li>\n\n\n\n<li>Feather: Website, Plugin, Font<\/li>\n\n\n\n<li>Bootstrap: Website, Plugin, Font<\/li>\n\n\n\n<li>Remix: Website, File, Font<\/li>\n\n\n\n<li>Material Design: Website, Plugin, Font<\/li>\n\n\n\n<li>Boxicons: Website, Plugin, Font<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_icons_in_your_Figma_file\"><\/span><strong>Add icons in your Figma file<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Add<strong> <a href=\"https:\/\/iamvector.com\/\">Free Ve<\/a><a href=\"https:\/\/dpbossnets.com\/\" target=\"_blank\" rel=\"dofollow noopener\">cto<\/a><a href=\"https:\/\/iamvector.com\/\">r icons<\/a><\/strong> from the collection you&#8217;ve chosen as SVG files. This enables you to change the vector color and size of the icon. Add the icons by downloading them and then dragging and dropping them into your project, or by choosing them in a plugin (most recommended).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Add downloaded icons:<\/strong> Drag and drop online icons into your Figma file after downloading them to your PC.<br><\/li>\n\n\n\n<li><strong>Add icons from a Figma plugin: <\/strong>Install an icon plugin, open it in your file, and then drag and drop the icon(s) into it.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Customize_icons\"><\/span><strong>Customize icons<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Change the size, color, and resizing behavior of the icons. This makes creating with your icons considerably faster because fewer overrides are required. It also aids in the consistency of your designs.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Size each icon: <\/strong>When <strong><a href=\"https:\/\/iamvector.com\/\">Free S<\/a><a href=\"https:\/\/wrostgame.com\/\" target=\"_blank\" rel=\"dofollow noopener\">VG<\/a><a href=\"https:\/\/iamvector.com\/\"> icons<\/a><\/strong> are inserted, they will show as a square frame with a vector within. Resize every frame to match the scale of your default icon. Select a preset icon size that is scalable by 4 or 8 so that your icons line with your support frame (e.g. 16&#215;16, 20&#215;20, 24&#215;24).<br><\/li>\n<\/ul>\n\n\n\n<p>Every frame should have some internal cushioning on both sides (e.g. 2px). This guarantees that all icons, regardless of form, seem consistently sized and spaced. The same reasoning applies to varying the amount provided around various types of characters.<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Style each icon:<\/strong> To fit your identity, change the fill color of each icon graphic. For example, change all of your icons from black to your standard grey look. Also, change the default color of stateful icons to &#8220;active&#8221; (e.g. radio buttons and checkboxes).<br><\/li>\n\n\n\n<li><strong>Set the resizing behavior: <\/strong>Every icon vector should have its constraints set to &#8220;scale\/scale&#8221; so that it expands and contracts in step with the dimensions of its frame. In this manner, each icon&#8217;s size may be adjusted while maintaining the ideal balance between padding and size.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Turn_into_Main_components\"><\/span><strong>Turn into Main components<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Make each icon a primary component so that you may utilize it across your projects. This makes it easy to search, add, and switch icons. It also significantly speeds up mass icon changes. For example, altering the color of an icon. Rather than searching for every icon in your designs, edit the one major component.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Place all of the icons in an &#8220;Icon&#8221; frame. This helps to organize your file. It also provides the same nesting structure to the Asset Panel as putting &#8220;Icon\/&#8221; at the start of every name.<br><\/li>\n\n\n\n<li>Give each icon a name (e.g. &#8220;Close&#8221;). For icon categories, use the forward slash (&#8220;\/&#8221;) naming convention (e.g., &#8220;Format\/Bold&#8221;, &#8220;Format\/Italic&#8221;).<br><\/li>\n\n\n\n<li>Select all of the icons and then, in the toolbar, select &#8220;make multiple components.&#8221;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_icons\"><\/span><strong>Using icons<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>After you&#8217;ve created your icons, you&#8217;re ready to start using them in your designs. They can be utilized as standalone elements or as nested elements inside bigger components.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_swap_icon_instances\"><\/span><strong>Add &amp; swap icon instances<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Instances are copies of their primary components. They may be accessed and added via the Asset Panel, and they can be switched out in a variety of ways.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Add icon instance:<\/strong> In the Asset Panel, look for the desired icon. Drag and drop an object of it into your designs from here.<br><\/li>\n\n\n\n<li><strong>Swap icon: <\/strong>While holding the &#8220;option&#8221; key, drag and drop your new icon over the current icon. Any style\/size changes made to the original icon will be preserved.<br><\/li>\n\n\n\n<li><strong>Swap nested icon:<\/strong> Select the layered icon, then in the Instance Menu, select a new icon. Any style\/size changes made to the original icon are retained.<br><\/li>\n\n\n\n<li><strong>Swap variant icon: <\/strong>Choose a different value of the property to change the type or condition of the icon.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Apply_overrides\"><\/span><strong>Apply overrides<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Customize the size and color of icon instances to make them your own. These overrides have no effect on the main component and only impact the instance. To apply overrides, change the icon&#8217;s size or pick the icon vector and change the fill color.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Developer_handoff\"><\/span><strong>Developer handoff<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When it comes time to give off the designs, developers may check and export icons from the Figma file as needed. Provide the icon assets ahead of time to make things much easier for them. This may be accomplished by exporting all of the icons, making a sprite sheet, or employing an icon font (most recommended).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Export_icons\"><\/span><strong>Export icons<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Export icons as SVG, PNG, or JPEG files. To export them, pick each of their frames in the Design Panel and click the &#8220;+&#8221; symbol next to &#8220;Export.&#8221; Then, pick your chosen format and &#8220;Export X layers.&#8221; Select the &#8220;+&#8221; sign many times to export various formats at once.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>SVG<\/strong> is a vector graphic format that is based on XML. It enables exports to have a translucent backdrop and to scale up and down without losing quality. SVGs are the finest solution for the web since they can also be expressed in scripts or code.<br><\/li>\n\n\n\n<li><a href=\"https:\/\/iamvector.com\/blog\/how-is-webp-different-from-svg-and-png-formats\/\"><strong>PNG<\/strong> format<\/a> is a lossless graphics format. It enables the output to have a translucent backdrop while keeping the quality excellent when compressed. This is the second best option for the web.<br><\/li>\n\n\n\n<li><strong>JPEG<\/strong> is a lossy picture compression format. It cannot have a translucent backdrop, and its measurements are fixed, resulting in lesser quality. As a result, it is not suggested for use on the web.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Spritesheet\"><\/span><strong>Spritesheet<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you want to use several icons without an icon font, use an icon sprite sheet. A sprite sheet is a single picture that contains all of the icons that are currently in use with particular X and Y coordinates. These coordinates are then utilized to show the appropriate icon in the appropriate location.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Icon_font\"><\/span><strong>Icon font<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The most suggested approach to utilize icons is to use an icon font. They make use of the current browser&#8217;s typographic representation capabilities. This enables developers to include icons in their applications with only a few lines of code. It is less difficult, takes up less room, and looks fantastic. Look for an icon library that has a supported icon font when selecting one.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span><strong>Final Thoughts:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This enables you to change the vector color and size of the icon. Add icons from a Figma plugin: Install an icon plugin, open it in your file, and then drag and drop the icon into it. Customize them Change the size, color, and resizing behavior of the icons. Style each icon: To fit your identity, change the fill color of each icon graphic. Place all of the icons in an &#8220;Icon&#8221; frame. Select all of the icons and then, in the toolbar, select &#8220;make multiple components&#8221;. Swap variant icon: Choose a different value of the property to change the type or condition of the icon. Apply overrides Customize the size and color of icon instances to make them your own. This may be accomplished by exporting all of the icons, making a sprite sheet, or employing an icon font. Icon font The most suggested approach to utilize icons is to use an icon font.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Icons are an essential component of every design system. They are little, language-independent symbols that assist us in understanding and navigating digital things. Each one serves as a simple building block for more significant, complicated components. In this tutorial, we&#8217;ll go through how to create icons, use them in Figma, and pass them off to [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":3466,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":[],"rop_publish_now_history":[],"rop_publish_now_status":"pending","footnotes":""},"categories":[53],"tags":[42,9],"class_list":{"0":"post-1097","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-vector-icons","8":"tag-free-svg-icons","9":"tag-free-vector-icons"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The Complete Guide On Using Icons in Figma<\/title>\n<meta name=\"description\" content=\"Icons are an essential component of every design system. They are little, language-independent symbols that assist us in understanding\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Complete Guide On Using Icons in Figma\" \/>\n<meta property=\"og:description\" content=\"Icons are an essential component of every design system. They are little, language-independent symbols that assist us in understanding\" \/>\n<meta property=\"og:url\" content=\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-14T10:50:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-01T10:19:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/02\/banner.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1164\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Gulshan Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gulshan Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/\"},\"author\":{\"name\":\"Gulshan Kumar\",\"@id\":\"https:\/\/iamvector.com\/blog\/#\/schema\/person\/0b71ecfa1e688957a579b6caa0a30745\"},\"headline\":\"The Complete Guide On Using Icons in Figma\",\"datePublished\":\"2022-07-14T10:50:53+00:00\",\"dateModified\":\"2025-02-01T10:19:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/\"},\"wordCount\":1434,\"image\":{\"@id\":\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/02\/banner.webp\",\"keywords\":[\"Free SVG icons\",\"free vector icons\"],\"articleSection\":[\"Vector Icons\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/\",\"url\":\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/\",\"name\":\"The Complete Guide On Using Icons in Figma\",\"isPartOf\":{\"@id\":\"https:\/\/iamvector.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/02\/banner.webp\",\"datePublished\":\"2022-07-14T10:50:53+00:00\",\"dateModified\":\"2025-02-01T10:19:29+00:00\",\"author\":{\"@id\":\"https:\/\/iamvector.com\/blog\/#\/schema\/person\/0b71ecfa1e688957a579b6caa0a30745\"},\"description\":\"Icons are an essential component of every design system. They are little, language-independent symbols that assist us in understanding\",\"breadcrumb\":{\"@id\":\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#primaryimage\",\"url\":\"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/02\/banner.webp\",\"contentUrl\":\"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/02\/banner.webp\",\"width\":1164,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/iamvector.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Complete Guide On Using Icons in Figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/iamvector.com\/blog\/#website\",\"url\":\"https:\/\/iamvector.com\/blog\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/iamvector.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/iamvector.com\/blog\/#\/schema\/person\/0b71ecfa1e688957a579b6caa0a30745\",\"name\":\"Gulshan Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/iamvector.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/04\/IMG_20250215_211556_839__2_-removebg-preview.png\",\"contentUrl\":\"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/04\/IMG_20250215_211556_839__2_-removebg-preview.png\",\"caption\":\"Gulshan Kumar\"},\"description\":\"Gulshan Kumar is a WordPress and full-stack developer, as well as a fitness freak. He loves coding and enjoys sharing his knowledge with the community. This lad started his journey back in 2018 and since then, he\u2019s been customizing IamVector and writing about what he knows best.\",\"url\":\"https:\/\/iamvector.com\/blog\/author\/gulshan3442\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Complete Guide On Using Icons in Figma","description":"Icons are an essential component of every design system. They are little, language-independent symbols that assist us in understanding","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:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/","og_locale":"en_US","og_type":"article","og_title":"The Complete Guide On Using Icons in Figma","og_description":"Icons are an essential component of every design system. They are little, language-independent symbols that assist us in understanding","og_url":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/","article_published_time":"2022-07-14T10:50:53+00:00","article_modified_time":"2025-02-01T10:19:29+00:00","og_image":[{"width":1164,"height":600,"url":"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/02\/banner.webp","type":"image\/webp"}],"author":"Gulshan Kumar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gulshan Kumar","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#article","isPartOf":{"@id":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/"},"author":{"name":"Gulshan Kumar","@id":"https:\/\/iamvector.com\/blog\/#\/schema\/person\/0b71ecfa1e688957a579b6caa0a30745"},"headline":"The Complete Guide On Using Icons in Figma","datePublished":"2022-07-14T10:50:53+00:00","dateModified":"2025-02-01T10:19:29+00:00","mainEntityOfPage":{"@id":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/"},"wordCount":1434,"image":{"@id":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/02\/banner.webp","keywords":["Free SVG icons","free vector icons"],"articleSection":["Vector Icons"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/","url":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/","name":"The Complete Guide On Using Icons in Figma","isPartOf":{"@id":"https:\/\/iamvector.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#primaryimage"},"image":{"@id":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/02\/banner.webp","datePublished":"2022-07-14T10:50:53+00:00","dateModified":"2025-02-01T10:19:29+00:00","author":{"@id":"https:\/\/iamvector.com\/blog\/#\/schema\/person\/0b71ecfa1e688957a579b6caa0a30745"},"description":"Icons are an essential component of every design system. They are little, language-independent symbols that assist us in understanding","breadcrumb":{"@id":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#primaryimage","url":"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/02\/banner.webp","contentUrl":"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/02\/banner.webp","width":1164,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/iamvector.com\/blog\/the-complete-guide-on-using-icons-in-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/iamvector.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The Complete Guide On Using Icons in Figma"}]},{"@type":"WebSite","@id":"https:\/\/iamvector.com\/blog\/#website","url":"https:\/\/iamvector.com\/blog\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/iamvector.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/iamvector.com\/blog\/#\/schema\/person\/0b71ecfa1e688957a579b6caa0a30745","name":"Gulshan Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/iamvector.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/04\/IMG_20250215_211556_839__2_-removebg-preview.png","contentUrl":"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2025\/04\/IMG_20250215_211556_839__2_-removebg-preview.png","caption":"Gulshan Kumar"},"description":"Gulshan Kumar is a WordPress and full-stack developer, as well as a fitness freak. He loves coding and enjoys sharing his knowledge with the community. This lad started his journey back in 2018 and since then, he\u2019s been customizing IamVector and writing about what he knows best.","url":"https:\/\/iamvector.com\/blog\/author\/gulshan3442\/"}]}},"_links":{"self":[{"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/posts\/1097","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/comments?post=1097"}],"version-history":[{"count":8,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/posts\/1097\/revisions"}],"predecessor-version":[{"id":2606,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/posts\/1097\/revisions\/2606"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/media\/3466"}],"wp:attachment":[{"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/media?parent=1097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/categories?post=1097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/tags?post=1097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}