Free Font Awesome UI kit: wireframe web & app interfaces with our icons
Looking for the perfect set of icons for your web and app designs? You’re in the right place! Download our free Font Awesome UI kit now!
Introducing our latest UI kit: Justinmind’s Font Awesome UI library! Our new UI library comes complete with all the Font Awesome icons you need to design amazing web and mobile prototypes.
All the best Font Awesome icons in Justinmind’s free UI kit!
Icons are an essential part of UI design. The icons you include in your screens need to be clean-cut and meaningful to offer the best possible user experience. Font Awesome, a project by Dave Gandy, is the most popular way to add icons to your websites and apps.
And now for all you lucky Justinmind users, these web icons are available in your favorite prototyping tool! You’re just a few clicks away from creating fabulous prototypes with Font Awesome icons.
What is Justinmind’s Font Awesome UI kit?
Justinmind’s Font Awesome UI kit contains a complete set of Font Awesome web and app icons. All of our icons reflect original Font Awesome designs; however the size and color of the icons can be customized to suit your specific design requirements.
Justinmind users may have already tried out earlier versions of our Font Awesome UI kit. Regardless, with the new Font Awesome kit, you’re in for a treat. Our new UI library reflects all the updates and extras included in Font Awesome’s May update (5.0.11), to ensure you’ve got the latest resources at your disposal.
You no longer have to download icons from Font Awesome and import them into your design tool. Justinmind’s dedicated UI kit has all of the icons you need, all in the same place and ready for you to use throughout your design project.
Let’s take a closer look at the UI kit!
What’s in Justinmind’s Font Awesome UI kit?
Our Font Awesome UI library contains over 700 vector icons. All of our icons have been designed according to Font Awesome standards – including icon names, groups and location within the library.
Let’s take a look at each icon category:
- Basic Font Awesome icons: this is where you’ll find the bulk of Font Awesome icons. Choose from a wide range of graphics, covering everything from food, transport and leisure to technology, accessibility and user satisfaction emoticons.
- Media control icons: icons that change or adjust device or software controls (such as play, pause, reverse and stop)
- Directional icons: icons that point or indicate direction
- Text editor icons: icons for adjusting placement or styling of text
- Brands: iconic brand logos (including eBay, Google and WhatsApp). Our library includes the new Creative Commons brand icons as well as popular brands such as keybase.io, eBay, Mastodon and ResearchGate, to reflect Font Awesome’s most recent update.
Consistency and readability in Justinmind’s Font Awesome UI kit
We recently wrote about the importance of proximity in UI layout design. Proximity means that UI elements and icons placed close together should correspond to each other, so that users are able to recognize and associate them easily. We’ve made sure that closely related icons are placed side by side in our UI kit, making it easy for you to find your way around.
Also, note that all of the icons have been designed using vector graphics. This means that they are scalable and color editing your icons is simple. We’ll explore vector graphics in depth later on in the post.
Getting started with Justinmind’s Font Awesome UI kit
Follow these 4 steps to get started with Justinmind’s Font Awesome kit:
- Download Justinmind and start your free 15 day trial
- Download the Font Awesome UI kit
- Open Justinmind and create a new web prototype
- Import the UI kit into Justinmind prototyping tool. The Widget Library palette is visible on the left-hand side.
Using Justinmind’s Font Awesome icons is as easy as 1-2-3. Simply drag and drop icons to the canvas to get started. Then, arrange and scale icons, as well as modify their colors, to fit your design specifications.
Prototyping a mobile app with Justinmind’s Font Awesome icons
In our example, we’re going to create a hotel reservation mobile app using Font Awesome icons. Note that we are using Justinmind’s iPhone X prototyping template, but you can use any of our mobile device templates.
Creating the initial screen with Font Awesome icons
Let’s start by creating our app’s initial screen
From the iPhone X Widget library, drag the Status bar light (header widget) to the top of the canvas and place it carefully around the notch.
From the Basic Widget library, drag an Image widget to the canvas and place it below the header. Add an image of your hotel. Use Text widgets to give the hotel a name, description and price. Use the Font Awesome Star icons to give it a star rating out of five.
Below, create a grid of hotel features and helpful information. Start by dragging a Table widget from the Basic Widget library to the canvas. In the Properties palette, change the number of rows to 2 and columns to 6.
Next, choose a set of icons from the Font Awesome library to add to the table. To match our example, choose the following widgets:
- Map marker
- Comments solid
Drag the icons directly into the table. Note that the cells in your table are set up with central alignment by default, so your icons will automatically be slotted into the center of the cell. No need to fiddle around with spacing! Learn more about prototyping grids in Justinmind here.
If you want to resize or change the color or any other styling of your Font Awesome icons, go right ahead! The Properties palette is your oyster.
At the bottom of the canvas, add a Button widget and write “Find your room” in it.
Creating the Services screen with Font Awesome icons
Next, we’ll create the Services screen.
To do so, go to the Screens palette and click the ‘+’ button to add a second screen. Give it a name (Services for instance) and click “OK”. While you’re at it, create two additional screens and name them “Contact” and “Comments” respectively.
Click on the Services screen in the Screens palette to start editing it. Now it’s time to choose the services, features and amenities you want to include in this screen.
To match our example, choose icons that correspond to: hotel amenities, dining, outdoor activities, and other (e.g. shopping, gaming and music).
Give each category a header (using Text widgets) and group each category together (right click “Group”). Grouping UI elements together allows you to edit and move them all around the canvas at the same time. Place your groups of UI elements on the screen to match our example.
If you’d like to include a carousel of moving images in this screen like we have, follow these instructions to learn how to do so.
The Contact screen with Font Awesome icons
Now, go to the Contact screen from the Screens palette.
To reproduce the map we have in our example, drag the iPhone X Map screen to the canvas. If you want users to be able to interact with the map (i.e. search it and pinpoint locations), drag and drop the Map marker and Search Font Awesome icons on top of the map.
Then, drag a Rectangle widget from the Basic Widget library to the canvas. Change its color to white and reduce its height so that it only covers to bottom half of the canvas. Make sure that it’s sitting on top of the map, rather than underneath it.
Drag a set of Font Awesome icons on top of the rectangle. These should be related to travel. In our example, we’ve included the Bicycle, Plane, Car and Train icons. Group the icons together and give the group a header (e.g. “How to get to your hotel”).
Now do the same but with icons related to communication. We’ve included the Comments solid, Phone and Envelope icons.
Finally, create a form with a button at the bottom of the canvas so that users can get in touch with the hotel directly from this screen. Learn how to create interactive forms with Justinmind here.
The Comments screen with Font Awesome icons
Now, go to the Comments screen. This is where users can read reviews and feedback from previous guests to get an idea of whether a particular accommodation will be to their liking.
To design this screen, start by adding a header with a Text widget.
We’ve used a star rating system, using the star and thumbs up/down Font Awesome icons. However, there are plenty of other user satisfaction icons to choose from, such as the thumbs up/down hearts and smiley faces icons.
To match our example, drag a combination of empty and solid star icons to the canvas. Change their color to yellow (#ffc444 to match our example) and group them together. Below, drag a Paragraph widget to the canvas and write a hotel review in it. Group the star group and Paragraph together and place them at the top of the page, below the header.
Now copy the group and paste it to create additional user reviews. Remember to change the star rating and the text!
To match our example use Thumbs up and Thumbs down icons to distinguish between positive and negative feedback.
Finally, add a Button to the bottom of the canvas and name if “Write your feedback”, so additional users can give feedback about the hotel.
Why you need Justinmind’s Font Awesome UI kit
Do more with vector icons
Our icons have been created using vector graphics, the standard for icons creation in user interface design. This makes a huge different to your design process.
Vector images are stored as mathematical formulas and don’t rely on pixel information (unlike raster images). This means that they are totally independent of size and can be customized with different styles (color, border, transparency, shadow etc.) as well as enlarged or shrunk without loss of quality.
Go ahead and check out our post on the power of vector images if you want to learn more.
Save time with readymade icons
Using our Font Awesome UI library saves you precious design time. Drag and drop any of our readymade icons directly onto the canvas to build out your designs in no time.
Icons are universal
And don’t forget, icons are a great way to make your design accessible to users. Icons are fast to recognize and need no translation, making them a great usability tool for your UI design. Remember to stick to standard icons for the most important aspects of your design!
Justinmind’s Font Awesome UI kit – download now
Justinmind’s Font Awesome UI kit offers a visually consistent set of icons that works well on any screen size or device.
Icons are a great way to convey meaning quickly in UI design. Vector graphics offer the highest-quality icons for your design, as well as give you the freedom to design according to your specifications.
- US Web Design Standards UI kit: for accessible government websitesDesigning a US government agency website calls for a high degree of accessibility and public impact. Justinmind’s US Web Design Standards UI kit lets you can design a website that echoes the US federal brand, while maintaining your agency’s style. Read on to find out how.