ounce591

ounce591

Which FontAwesome5 icons would you use here?

I am currently designing the navbar of a workout tracking app written using React Native. The navbar has three buttons:

  • Splits/Plans

  • Workout days

  • Excercises

For the excercises, I use a dumbbell icon, but I haven’t gotten any inspiration for the other two, as I think it’s difficult to find something that’s not too generic (like a list icon). Do you guys have ideas you could help me out with?

As the project is still in an early phase of development, I would also be willing to switch to an other icon package than FontAwesome5.

Thank you in advance :slight_smile:

Most Liked

gfqdjb

gfqdjb

I really like the Phosphor icons. They have a clean, modern look, a great variety, and they’re free and open source. Here are my suggestions for the icons that could work well for each section:

  • Splits/Plans: map-trifold (or other bullseye/target/map/route icon)
  • Workout Days: calendar (or other calendar icon)
  • Exercises: barbell (pretty self explanatory)

It’s not super original, but it’s easy to get.

mercyf

mercyf

Thank you for the suggestion. I was looking for something similar too.

gfqdjb

gfqdjb

More importantly, if you’re not planning to label every icon, at least add a clear heading or a tooltip that appears when you long-press a button. That way, users can tell what section they’re in or what each button does. It’s just bad UX to make people tap something just to figure out what it does.

Where Next?

Popular Frontend topics Top

Sally_san
So I’ve got a client that wants to build a site like this: Specifically 3 things from the website: The fullscreen sections that chang...
New
ClaudiaGiv
I have a sveltekit project that is using GoTrue library for authentication. In development mode (npm run dev) everything works but when I...
New
jubocade
What is the best course of front end (live webinars or recorded)? So I already have basic understanding of HTML CSS JS and React but I wa...
New
pillaiindu
I mean, when you render all the HTML at the server side and the data is sent through HTTP requests, except only if some tiny things are d...
New
david-j-m
Hi I have a gallery site which displays paintings according to selected category (oils, water-color, etc.) “on:click” event. When this e...
/js
New
JessicaW33
Hello All, How would you implement a navigation system in React Native? Could not find a way so I ask the community can someone help me ...
New
Fl4m3Ph03n1x
Background I have a Phoenix application, where all pages (expect the login page) have a menu at the top. This menu will therefore only a...
New
Julien0577
Hi all, Anybody knows how to do this menu animation? (from BBVA APP, they have the same for both android and iOS app). Is it custom?...
New
avipal
I have an application where it is three layer 1st layer- A legacy core routines 2nd layer- built on top of the Core routine using Dotno...
New
hosseinkhosromanesh
hello , i should code a cluster like image bellow we have no challenge in coding backend but in front need some clue to do this its a dy...
/js
New

Other popular topics Top

AstonJ
A thread that every forum needs! Simply post a link to a track on YouTube (or SoundCloud or Vimeo amongst others!) on a separate line an...
New
New
AstonJ
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
New
New
PragmaticBookshelf
Create efficient, elegant software tests in pytest, Python's most powerful testing framework. Brian Okken @brianokken Edited by Kat...
New
New
First poster: AstonJ
Jan | Rethink the Computer. Jan turns your computer into an AI machine by running LLMs locally on your computer. It’s a privacy-focus, l...
New
PragmaticBookshelf
Get the comprehensive, insider information you need for Rails 8 with the new edition of this award-winning classic. Sam Ruby @rubys ...
New
AstonJ
This is a very quick guide, you just need to: Download LM Studio: https://lmstudio.ai/ Click on search Type DeepSeek, then select the o...
New
PragmaticBookshelf
Use advanced functional programming principles, practical Domain-Driven Design techniques, and production-ready Elixir code to build scal...
New