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

New
pillaiindu
Some days ago I came across a video teaching the internals of git. It had some nice diagrams and animations. The diagrams looked like han...
New
axelson
In Elixir I love to use the library GitHub - sasa1977/boundary: Manage and restrain cross-module dependencies in Elixir projects to enfor...
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
tomcatttttt
I’m trying to take the API from the site to get a seamless online game through the HTML5 API. It works in all browsers except Google Chro...
New
prego4444
how can i make a border like this to be exactly on the midle of the edge? i could only found border in inside and outside but nothing on ...
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
gameengineer
We are developing on Samsung Tab Active 4 Pro using Android Studio, kotlin and java. We are getting what we think are app deadlocks. The ...
New
Clintonsuck
Hello, I am new and trying to build my first app. So far, everything was going okay, but now I’m stuck and don’t know how to proceed. May...
New
jaeyson
would it be backwards if I’m learning react? last time I used UI library (aside from LiveView) was Elm (not much) and that was eons ago.
New

Other popular topics Top

PragmaticBookshelf
Write Elixir tests that you can be proud of. Dive into Elixir’s test philosophy and gain mastery over the terminology and concepts that u...
New
ohm
Which, if any, games do you play? On what platform? I just bought (and completed) Minecraft Dungeons for my Nintendo Switch. Other than ...
New
AstonJ
Just done a fresh install of macOS Big Sur and on installing Erlang I am getting: asdf install erlang 23.1.2 Configure failed. checking ...
New
Exadra37
I am asking for any distro that only has the bare-bones to be able to get a shell in the server and then just install the packages as we ...
New
foxtrottwist
A few weeks ago I started using Warp a terminal written in rust. Though in it’s current state of development there are a few caveats (tab...
New
mafinar
This is going to be a long an frequently posted thread. While talking to a friend of mine who has taken data structure and algorithm cou...
New
AstonJ
If you want a quick and easy way to block any website on your Mac using Little Snitch simply… File > New Rule: And select Deny, O...
New
New
DevotionGeo
I have always used antique keyboards like Cherry MX 1800 or Cherry MX 8100 and almost always have modified the switches in some way, like...
New
NewsBot
Node.js v22.14.0 has been released. Link: Release 2025-02-11, Version 22.14.0 'Jod' (LTS), @aduh95 · nodejs/node · GitHub
New