Free Font Awesome UI kit: wireframe web & app interfaces with our icons

Need a UI kit that lets you design amazing web and mobile app wireframes using Font Awesome icons? Then you need to create your wireframes with Justinmind’s Font Awesome 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 free wireframe tool! You’re just a few clicks away from creating fabulous wireframes with Font Awesome icons.

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.

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!

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.

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. Learn more about visual hierarchy.

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. If you’re in the market for more vector files, check out post on places to get free vector images.

Follow these 4 steps to get started with Justinmind’s Font Awesome kit:

1. Download the Justinmind wireframe tool
2. Download Font Awesome from our UI kits page
3. Open Justinmind and create a new web or mobile prototype
4. Import the UI kit into Justinmind
5. Have fun designing responsive wireframes!

In our example, we’re going to create a hotel reservation mobile app wireframe 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.

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:

• Cutlery
• Calendar
• Photo
• Map marker
• Comments solid
• Plus

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.

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.

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 wireframe examples, 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 in your wireframe as we have, follow the instructions to learn how to do so in our support center.

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 prototype forms and inputs with Justinmind.

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. Learn about button design for more creative wisdom.

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.

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.

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 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.

So don’t delay. Download Justinmind’s Font Awesome UI kit and explore 700+ brand-new icons now!