Skip to content
FyneCookbook

Icons

Icons in Fyne are vector-based and theme-aware, allowing them to scale cleanly and automatically adapt to light or dark themes.

Usage

Section titled “Usage”
Show Code 
package main


import (
  "fyne.io/fyne/v2"
  "fyne.io/fyne/v2/app"
  "fyne.io/fyne/v2/container"
  "fyne.io/fyne/v2/theme"
  "fyne.io/fyne/v2/widget"
)


var icons = []struct {
  Name string
  Res  fyne.Resource
}{
  {"CancelIcon", theme.CancelIcon()},
  {"ConfirmIcon", theme.ConfirmIcon()},
  {"ContentAddIcon", theme.ContentAddIcon()},
  {"ContentRemoveIcon", theme.ContentRemoveIcon()},
  {"DeleteIcon", theme.DeleteIcon()},
  {"SearchIcon", theme.SearchIcon()},
  {"HelpIcon", theme.HelpIcon()},
  {"InfoIcon", theme.InfoIcon()},
  {"WarningIcon", theme.WarningIcon()},
  {"ErrorIcon", theme.ErrorIcon()},
  {"HomeIcon", theme.HomeIcon()},
  {"FolderIcon", theme.FolderIcon()},
  {"FileIcon", theme.FileIcon()},
  {"MailComposeIcon", theme.MailComposeIcon()},
  {"MailForwardIcon", theme.MailForwardIcon()},
  {"MailReplyIcon", theme.MailReplyIcon()},
  {"MailReplyAllIcon", theme.MailReplyAllIcon()},
  {"MediaPlayIcon", theme.MediaPlayIcon()},
  {"MediaPauseIcon", theme.MediaPauseIcon()},
  {"MediaStopIcon", theme.MediaStopIcon()},
  {"MediaRecordIcon", theme.MediaRecordIcon()},
  {"MediaFastForwardIcon", theme.MediaFastForwardIcon()},
  {"MediaFastRewindIcon", theme.MediaFastRewindIcon()},
  {"MenuIcon", theme.MenuIcon()},
  {"MoreHorizontalIcon", theme.MoreHorizontalIcon()},
  {"MoreVerticalIcon", theme.MoreVerticalIcon()},
  {"MoveUpIcon", theme.MoveUpIcon()},
  {"MoveDownIcon", theme.MoveDownIcon()},
  {"NavigateBackIcon", theme.NavigateBackIcon()},
  {"NavigateNextIcon", theme.NavigateNextIcon()},
  {"VisibilityIcon", theme.VisibilityIcon()},
  {"VisibilityOffIcon", theme.VisibilityOffIcon()},
  {"DocumentIcon", theme.DocumentIcon()},
  {"ComputerIcon", theme.ComputerIcon()},
  {"SettingsIcon", theme.SettingsIcon()},
  {"CheckButtonIcon", theme.CheckButtonIcon()},
  {"RadioButtonIcon", theme.RadioButtonIcon()},
  {"DownloadIcon", theme.DownloadIcon()},
  {"UploadIcon", theme.UploadIcon()},
  {"StorageIcon", theme.StorageIcon()},
  {"ZoomInIcon", theme.ZoomInIcon()},
  {"ZoomOutIcon", theme.ZoomOutIcon()},
}


func main() {
  a := app.NewWithID("com.example.icons")
  w := a.NewWindow("Fyne Icon Selector")


  // Label + Icon to display selected item
  iconDisplay := widget.NewIcon(nil)
  nameLabel := widget.NewLabel("Select an icon...")


  // Prepare list of names for dropdown
  iconNames := make([]string, len(icons))
  for i, ic := range icons {
    iconNames[i] = ic.Name
  }


  // Select widget
  selectWidget := widget.NewSelect(iconNames, func(selected string) {
    for _, ic := range icons {
      if ic.Name == selected {
        iconDisplay.SetResource(ic.Res)
        nameLabel.SetText(ic.Name)
        break
      }
    }
  })


  // Layout: Select on top, then the icon + name centered
  display := container.NewVBox(
    selectWidget,
    container.NewCenter(container.NewVBox(iconDisplay, nameLabel)),
  )


  w.SetContent(display)
  w.Resize(fyne.NewSize(300, 300))
  w.ShowAndRun()
}