- Figma
-
/ Figma Icon Components
Figma Icon Components
Icons play an important role in enhancing the user experience and providing valuable visual cues within the Figma design system. Pagedone takes this to the next level by offering a broad selection of icons across various categories. Each icon is available in four distinct styles, all in SVG format. This extensive collection also includes all icons for countries and payments.
Using Pagedone Icon Library
Our Figma design system includes over 1200 high-quality icons that are completely free to use. These icons are organized into categories making it easy to find the Best icon for your needs.
The icons come in a variety of styles including line, glyph, dual line, and dual glyph. The line style icons feature minimal lines while the glyph style icons have solid shapes. The dual line and dual glyph icons combine both lines and solid glyphs. With these different styles, there is an icon design for your Figma project.
With over 1200 icons are categories, Icons for user action, Navigation, Media, User, Communication, Buildings, Map, Business, Finance, Weather, Shopping, Health, Security, Docs, Education, Editors, Development, Alerts, Shapes, Essential, Editors and many more categories are available.
You can use all of these icon assets freely without worrying about licensing. They are 100% free to use in personal and commercial projects.
Find icon & use icon
Having components for all the icons makes them simple to reuse across multiple projects. You don't have to worry about spacing, sizing, or coloring - the icon components manage themselves. The searchable asset library in Figma puts every icon in just a few clicks.
In summary, our premade icon components save time and effort while ensuring proper icon display. you can easily browse the full icon collection and drag any icons into your designs with Zero effort.
Selecting Icon Style
Our icon library includes icons in 4 main styles: Line style - Icons are made up of simple lines, Glyph style - Icons are made of solid shapes filled with color, Dual line style - Icons contain both lines and solid shapes, Dual glyph style - Icons have solid shapes with line accents.
You can easily switch an icon between these 4 styles using the Style dropdown menu.
For example, let's say you insert the "home" icon from the real estate section. It defaults to the line style. To change it to the glyph style, click on the icon to select it. Then locate the Style dropdown in the sidebar. Click the dropdown and choose "Glyph" from the list. The home icon will change from the line version to the filled glyph version.
You can use this same Style dropdown to switch to dual line or dual glyph as well. It provides an easy way to cycle through the available styles for any icon. Having all icons in multiple styles allows you to maintain visual consistency. Just insert your desired icon then use the Style picker to get exactly the style you need. This flexibility helps streamline your workflow when building designs.
Our icon library is designed on a consistent 24px by 24px grid system. This 24x24px grid provides several benefits
- Consistent sizing - Every icon fits the same 24x24px bounding box so they align perfectly when used together.
- Scalable - Icons can scale up or down easily in fixed increments due to the grid base size.
- Pixel-perfect - Icons look super sharp at common sizes like 24px, 48px, 96px, etc since they snap to the pixel grid.
- Spacing - 24px base size makes it easy to space icons consistently (e.g. 24px, 48px, or 72px apart).
- Easy Development - 24px is a common icon size used in coding. Our grid matches development use cases.