Fluency Icon Library - Smooth Outline Icons [2K Icons!]

Resources Community Resources
, , , ,
#72

  • Think of a theme and stick to it. Every nooks and cranny should be cohesive.

  • Increase usage of Offset rather than Scale. Both position and size.
    You can also combine them together. (1, -10, 1, 20)

  • Use UIPadding to constraint and margin your UIs

  • Animate your UIs with TweenService.

  • Last but not the least, use Fluency Icon Library :wink:

4 Likes
#73

Hi!

Just a small thing I’d like to see is the ability to make the widget smaller!
I personally like having a plugin like this docked on the side but right now it takes up more space than it needs.

Here’s what I mean:

image
image1920×687 83.1 KB

I’m fine with having only two (or even one?) columns of icons if I could resize the widget to be half as wide.
Maybe you could also add something like a “Compact” mode? Basically it would reduce the amount of white space and therefore make the UI compatible with smaller widget sizes.

Either way, I would really appreciate if you fixed this and the plugin is really awesome!

Have a nice day!

1 Like
#74

This also my pet peeve to the plugin but I don’t really want to do it since there’s no people really complaining so I just left it still. However, that changed now, expect in the next update that; The plugin automatically snap to Compact Mode when reached a lower than minimum widget size and will snap back into Basic Mode if the widget size is bigger.

1 Like
#75

Thank you so much! Your plugin is amazing and I absolutely love the UI!

Keep up the great work ^^

3 Likes
#76

Quick Update! :bell::sparkles:

Fluency Icon’s 6.5 iteration:

1500×300 35.5 KB

This update brings us the new and helpful feature:

:arrow_forward: COMPACT MODE :arrow_backward:

:thinking:: What is Compact Mode?

Compact Mode in Fluency Icon Library will make the UI adapted to the size of the Plugin Widget. It will also remove unnecessary UI elements. You can use this feature if you have a smaller screen or you just like the widget not taking so much space on your viewport.

:thinking:: What is the appearance of Compact Mode?

You can get up to 2 columns minimum limit.

253×609 28.2 KB

You can get to this tiny clumps of pixels of a widget size.

500×850 105 KB

Some UI Elements appearance in the Compact Mode:

299×607 90.2 KB
302×602 13.7 KB
303×609 23 KB

:thinking:: How can I use the Compact Mode?

You can get the Compact Mode working by just resizing the widget to a smaller size.

Try out now the new Compact Mode feature!
By updating the plugin to its latest version!



You can also tick the “Auto-Update” in Plugin Manager in Studio to reduce the steps for later additions and updates.

1110×326 21.8 KB

made with love, toast!:sparkling_heart:

3 Likes
#77

Thank you soo much! Seems very useful, can’t wait to try it :wink:

3 Likes
Here's How to Create a Modern Sleek UI Design [UI Tutorial]
#78

the OP made a tutorial on how to do it

(the OP already provided some tips but recently released a tutorial

3 Likes
#79

you should add icons from these websites:

  1. Humanitarian Icons | Font Awesome
  2. Thin Style Icons | Font Awesome
  3. Sharp Light Style Icons | Font Awesome
  4. Material Symbols and Icons - Google Fonts
#80

This is only for Fluency Icons. I might make another plugin for Material Icons.

1 Like
#81

Could you add Microsoft Teams emojis as they fit better with the fluent aesthetic?

#82

This plugin is great, i love all the icons and the way you make the UI.

1 Like
#83

1500×300 35.5 KB

Tiny ‘Quality of Life’ Update! :toolbox:

This update is focused more on the Asset Id Selection in the Icon Menu.
Let’s dive right in!

Out of Compact Mode, here’s the appearance of the Icon Menu:

Clicking the ‘rbxassetid://…’ will automatically select the whole asset id without dragging and manually selecting it.

Right clicking the ‘rbxassetid://…’ will automatically select only the numbers from the asset id.

image

Clicking it again will capture you in the Textbox.

804×158 26.3 KB

Going to the Compact Mode!

Clicking the ‘Copy Asset Id’ will display ‘Press Ctrl/Cmd + C’ which copies the Asset Id.

Doing so will copy the asset id without needing for manual selection.

3 Likes
#84

These remind me of the bootstrap icons that is free and available for public use. W plugin.

#85

You can just do it better by just a stream deck multi action

image

also How do you turn on “Compact Mode”?

#86

Suggestion: An plugin/added icons for letters of the alphabet. Would help alot!

#87

Make the plugin window size smaller and it’ll automatically enter Compact Mode

#88

Wow this is great. Nothing needs to be fixed, I dont have any suggestions.

All id say is it would be really cool if you could manage to use AI with this.

1 Like
#89

Just use the swift bar plugin. Its 100 robux.

#90

This is a great icon pack with a plugin. The only suggestion I have is to let us install an icon to a computer so we can directly install the icons to the computer without having to use a third party site to do so

#91

This topic’s a couple months old, so I’m sorry for bumping it, but after Roblox Studio’s latest update (v0.607.0.6070550), this error is output consistently whenever I stop testing:

  22:27:27.574  action_buttons is not a valid member of ImageButton "top_frame"  -  Studio
  22:27:27.574  Stack Begin  -  Studio
  22:27:27.574  Script 'cloud_11423603183.Fluency Icon Library.main_frame.main_module', Line 53 - function layout  -  Studio
  22:27:27.574  Script 'cloud_11423603183.Fluency Icon Library.main_frame.window_handler', Line 15  -  Studio
  22:27:27.574  Stack End  -  Studio
  22:27:27.574  clear is not a valid member of ImageButton "search"  -  Studio
  22:27:27.574  Stack Begin  -  Studio
  22:27:27.575  Script 'cloud_11423603183.Fluency Icon Library.main_frame.scroll_frame.header.action_buttons.search.handler', Line 63  -  Studio
  22:27:27.575  Stack End  -  Studio
1 Like