🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Input Icon

Use icon within form control.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

How to

The Input Icon component is used to display an icon within the .form-control element.

The default icon size is equal to 1em; therefore, it automatically resizes if you modify the font-size of the input elements.

Optionally, you can set a custom icon size by updating the --input-icon-size custom property value:

.form-control-wrapper {
  --input-icon-size: 1em; // icon size
  --input-icon-text-gap: var(--space-xxs); // gap between icon and text

⭐️ Demo icons by Nucleoapp.com.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us