CODEWITHSUNDEEP
fluttericons
Jeff
Jeff

Reputation: 475

What are the checkmark (✅) and cross/X (❌) icons in Flutter?

I'm trying to display tick (✅) and cross (❌) icons using Flutter. I have this code:

child: SlideAction(
    sliderButtonIconPadding: 8,
    text: Slidewords,
    textStyle: TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: (18),
        color: Colors.white),
    key: key,
    submittedIcon: formvalid
          ? const Icon(Icons.visibility) // tick icon
          : const Icon(Icons.visibility_off), // cross icon
    onSubmit: () async {
        Future.delayed(
          Duration(seconds: 1),
          () => key.currentState!.reset(),
        );
        _trySubmitForm();
    })

Clearly the Icons.visibility and Icons.visibility_off values don't work, but I can't find the right ones in the documentation. Ctrl+F doesn't seem to work to search on that page and it isn't very responsive.

I also tried Icon.tick, Icon.correct, and Icon.cross; none of these give me the result I want.

Upvotes: 25

Views: 39745

Answers (2)

Dhafin Rayhan
Dhafin Rayhan

Reputation: 8459

The icons you're looking for are Icons.check_box and Icons.close. For check icon without the filled box around it, use Icons.check.

Icons screenshot

If it's hard to search for icons in the Flutter docs, you can use the Material Symbols and Icons page from Google Fonts.

After finding the icon, you can click on it and a sidebar will appear on the right side. Go to the "Android" tab, the icon code will be the same as the one from the Icons class. For example, here's what you'll get if you click on the "Check Box" icon:

Material Symbols icon example

The code for this icon is "check_box", so you can use it in Flutter like this:

Icon(Icons.check_box)

In case there are icons you find in that page but not available in the Icons class, you can use the material_symbols_icons package. Now instead of using Icons, you can use Symbols:

// Import the package
import 'package:material_symbols_icons/symbols.dart';

// In your widget, use it as the IconData the same way as Icons
Icon(Symbols.add_task)

Upvotes: 14

vladzaba
vladzaba

Reputation: 1402

For a cross, use Icons.close, and for a tick, Icons.check.

Upvotes: 49

Related Questions