Plus UI
Plus UI ↗️Be Our Sponsor ↗️
  • Getting Started
    • Documentation Overview
    • Component List & Plans
    • Support
    • Contributing
    • FAQs
  • UI Library
    • Overview
    • Changelog
    • Installation
      • React
      • Vue
      • Angular
      • Svelte
  • Design System
    • Overview
    • Setting up on Figma
    • Styles & Variables
  • Components
    • Overview
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Button
    • Button Group
    • Breadcrumb
    • Checkbox
    • Chip
    • Divider
    • Drawer
    • Dropdown
    • Input
    • Link
    • Modal
    • Popconfirm
    • Popover
    • Progress
    • Radio
    • Rating
    • Select
    • Tab
    • Textarea
    • Toast
    • Toggle
    • Tooltip
  • Foundation
    • Overview
    • Color
      • Color Palette
      • Color Variables
      • Color Token List
    • Typography
    • Icons
    • Border
    • Spacing
    • Opacity
    • Shadows & Effects
    • Breakpoints
  • Customization
    • Customization
    • Theme
    • Accessibility
    • Tokens
Powered by GitBook
On this page
  • Kind
  • Sizing Icons
  • Line Height of Icon Containers
  • No Container Line Height
  • How to Use Icons in Plus UI Library
  • Powerful Integration with Font Awesome
  • Get help

Was this helpful?

  1. Foundation

Icons

Embrace visual storytelling and clarity in your user interface with Plus UI's Icon that powered by Font Awesome.

PreviousTypographyNextBorder

Last updated 1 year ago

Was this helpful?

Kind

Icon family has 3 different types which is Regular, Solid and Brand.

Sizing Icons

Tailor the size of your icons to fit harmoniously within your layout, ensuring a cohesive and aesthetically pleasing visual hierarchy. The versatility and customization options available for crafting the ideal iconography in your application.

Line Height of Icon Containers

If the icon is to be used next to the text, the icon variation with line height can be used to keep the bottom line height aligned.

No Container Line Height

If there is not enough space in the area to be used and the minimum version of the icon will be used, the version without line height can be used.

How to Use Icons in Plus UI Library

Step 1: Write icon to the assets and drag the result to the workspace.

Step 2: Visit Font Awesome web page and search for the Icon that you want to use.

Step 3: You can copy it by clicking on the Icon Name on the popup.

Step 4: Go back to Figma canvas and paste the icon name. All done!

Powerful Integration with Font Awesome

Font Awesome enriches the visual language with a diverse set of iconic elements that elevate the Plus UI Design System, providing users with a comprehensive and integrated toolkit for crafting exceptional user interfaces.

  • Iconic Elements: Font Awesome integration brings a plethora of iconic elements to the Plus UI Design System, enhancing visual appeal and providing a diverse range of symbols.

  • Scalable Icons: Font Awesome's scalable vector icons seamlessly align with our components, ensuring clear representations in any context.

  • Unified Aesthetics: The integration ensures a unified aesthetic language for a cohesive user experience.

Get help

If you're new to Figma, the platform may initially seem overwhelming, but exploring the interface can be a fun and rewarding experience. Before you can use the Keep Design System in Figma, it's essential to learn the basic tools and functionalities of the platform.

Font Awesomefontawesome
Logo
kinds of icon
sizing icons
line height of icon containers
no container line height
using icons in figma
find your icon
copy icon name
paste icon name
font awesome
Cover

Join Figma Community

Cover

Join Discord Community

Cover

Join us on Twitter