0

Icon picker

Find the name of each available icon in Ninox

✅ In version 3.12 we introduced a new icon library and an updated icon picker.
❗ When you update from version 3.11 to 3.12, Ninox needs to map the new icons for them to work correctly. For more details on the updates from the old icons to the new designs, please see this PDF file: 3.12 icon mapping.pdf.

What changed in 3.12

We've expanded the icon library with a larger selection and added new customization options, including adjustable color, weight, and fill, along with a new search function in the icon picker, making it easier to find and personalize icons to fit your needs.

Whether you’re updating from version 3.11 or using Ninox for the first time, these changes are designed to make using icons simpler and more effective.

Key updates

  • We’ve expanded our icon library from 254 to over 3000 to better meet business needs.
  • Icons now have customizable colors and sizes, moving away from fixed options.
  • We’ve added a search feature and made the icon picker more compact and easier to scroll through.

Previous icon picker in 3.11

Where you'll see the new icon picker

  • Icon field
  • Choice field
  • Multiple choice field
  • Kanban view
  • Subtable view on a form
  • Table settings pop-up
  • Conditional formatting pop-up
  • icon and styled functions in Ninox script

Updated icon picker in 3.12

Icon names and look

  • Existing icon names (3.11 and older): Using an old icon name will automatically display its updated version. This ensures a smooth transition and keeps your icon usage consistent.
    • Filling: None (FILL set to 0)
    • Weight: Normal (wght set to 400)
    • Grade: Unchanged (GRAD set to 0)
    • Optical size: Optimal for medium to large displays (opsz set to 48)

Version-specific icon transformations

  • Updating from 3.11 to 3.12:
    • When you update from version 3.11 to 3.12, all your current icons will automatically update to their equivalents in the new icon palette. This update may change how the icons look and work to match the new style and features of version 3.12.
  • Downgrading from 3.12 to 3.11 without using the icon picker:
    • If you downgrade from version 3.12 to 3.11 and didn't use the icon picker to choose new icons, all your icons will go back to how they were in 3.11. This means your icons will look just like they did before the update, as long as you didn’t add any new ones while using 3.12.
  • Using the icon picker in 3.12 and then downgrading:
    • When you select icons via the icon picker in version 3.12, these icons are assigned CSS values that do not match the predefined CSS values of icons in version 3.11. As a result, if you update to version 3.12, use the icon picker to select new icons, and then decide to downgrade to version 3.11, these icons will not revert to their older versions. Instead, these icons will not be displayed correctly due to the mismatch in CSS values.
❗ If you pick new icons in version 3.12, using either the icon picker or functions like icon and styled in the formula editor, these icons and styles are just made for 3.12. When you downgrade to 3.11, these icons and styles won’t work right. They could turn into blank spaces or not show up at all, because version 3.11 doesn’t recognize these new names or styles.

Customizing icons

You can customize the appearance of individual icons in the formula editor. Below is an example script to specify the properties of an icon:

let myIcon := {
  filling: 1,
  weight: 500,
  icon: "mail",
  color: "#43d682"
};
icon(formatJSON(myIcon))

Result

The Formula pop-up with the above example script

Customized mail icon

Reply

null