How to use grommet-icons - 10 common examples

pad: { horizontal: 'small', vertical: 'xsmall' },
        background: {
          dark: 'dark-2',
          light: 'light-2'
        }
      },
      header: {
        border: { side: 'bottom', size: 'small' },
        pad: { horizontal: 'small', vertical: 'xsmall' },
        background: {
          dark: 'dark-1',
          light: 'light-1'
        }
      },
      icons: {
        ascending: _grommetIcons.FormDown,
        contract: _grommetIcons.FormUp,
        descending: _grommetIcons.FormUp,
        expand: _grommetIcons.FormDown
      },
      resize: {
        border: {
          side: 'right',
          color: {
            dark: 'border-dark',
            light: 'border-light'
          }
        }
      }
    },
    // drop: {
    //   maxHeight: undefined,

large: baseSpacing * 16 + 'px', // 384
          xlarge: baseSpacing * 32 + 'px', // 768
          full: '100%'
        }
      },
      text: {
        color: {
          dark: '#f8f8f8',
          light: textColor
        }
      }
    },
    accordion: {
      icons: {
        collapse: _grommetIcons.FormUp,
        expand: _grommetIcons.FormDown
        // color: { dark: undefined, light: undefined },
      }
    },
    anchor: {
      textDecoration: 'none',
      fontWeight: 600,
      color: {
        dark: '#6194EB',
        light: '#6194EB'
      }
    },
    button: {
      border: {
        // color: { dark: undefined, light: undefined }
        width: borderWidth + 'px',
        radius: baseSpacing * 0.75 + 'px'

light: 'light-2'
        }
      },
      header: {
        border: { side: 'bottom', size: 'small' },
        pad: { horizontal: 'small', vertical: 'xsmall' },
        background: {
          dark: 'dark-1',
          light: 'light-1'
        }
      },
      icons: {
        ascending: _grommetIcons.FormDown,
        contract: _grommetIcons.FormUp,
        descending: _grommetIcons.FormUp,
        expand: _grommetIcons.FormDown
      },
      resize: {
        border: {
          side: 'right',
          color: {
            dark: 'border-dark',
            light: 'border-light'
          }
        }
      }
    },
    // drop: {
    //   maxHeight: undefined,
    // },
    formField: {
      border: {

icon: {
      colors: colors
    },
    iconThemes: {},
    layer: {
      background: 'white',
      border: {
        radius: '4px'
      },
      overlay: {
        background: 'rgba(0, 0, 0, 0.5)'
      }
    },
    menu: {
      icons: {
        down: _grommetIcons.FormDown
      }
    },
    paragraph: {
      small: _extends({}, fontSizing(-1)),
      medium: _extends({}, fontSizing(0)),
      large: _extends({}, fontSizing(1)),
      xlarge: _extends({}, fontSizing(2))
    },
    radioButton: {
      check: {
        // color: { dark: undefined, light: undefined },
      },
      border: {
        color: {
          dark: 'rgba(255, 255, 255, 0.5)',
          light: 'rgba(0, 0, 0, 0.15)'

daySize: baseSpacing * 32 / 7 + 'px',
        slideDuration: '0.8s'
      },
      icons: {
        previous: _grommetIcons.Previous,
        next: _grommetIcons.Next,
        small: {
          previous: _grommetIcons.FormPrevious,
          next: _grommetIcons.FormNext
        }
      }
    },
    carousel: {
      icons: {
        current: _grommetIcons.Subtract,
        next: _grommetIcons.Next,
        previous: _grommetIcons.Previous
        // color: undefined,
      }
    },
    checkBox: {
      border: {
        color: {
          dark: 'rgba(255, 255, 255, 0.5)',
          light: 'rgba(0, 0, 0, 0.15)'
        },
        radius: '4px',
        width: '2px'
      },
      check: {
        // color: { dark: undefined, light: undefined },
        width: '4px'

},
      medium: {
        fontSize: baseFontSize + 'px',
        lineHeight: 1.45,
        daySize: baseSpacing * 16 / 7 + 'px',
        slideDuration: '0.5s'
      },
      large: {
        fontSize: baseFontSize + fontScale + 'px',
        lineHeight: 1.11,
        daySize: baseSpacing * 32 / 7 + 'px',
        slideDuration: '0.8s'
      },
      icons: {
        previous: _grommetIcons.Previous,
        next: _grommetIcons.Next,
        small: {
          previous: _grommetIcons.FormPrevious,
          next: _grommetIcons.FormNext
        }
      }
    },
    carousel: {
      icons: {
        current: _grommetIcons.Subtract,
        next: _grommetIcons.Next,
        previous: _grommetIcons.Previous
        // color: undefined,
      }
    },
    checkBox: {
      border: {

slideDuration: '0.2s'
      },
      medium: {
        fontSize: baseFontSize + 'px',
        lineHeight: 1.45,
        daySize: baseSpacing * 16 / 7 + 'px',
        slideDuration: '0.5s'
      },
      large: {
        fontSize: baseFontSize + fontScale + 'px',
        lineHeight: 1.11,
        daySize: baseSpacing * 32 / 7 + 'px',
        slideDuration: '0.8s'
      },
      icons: {
        previous: _grommetIcons.Previous,
        next: _grommetIcons.Next,
        small: {
          previous: _grommetIcons.FormPrevious,
          next: _grommetIcons.FormNext
        }
      }
    },
    carousel: {
      icons: {
        current: _grommetIcons.Subtract,
        next: _grommetIcons.Next,
        previous: _grommetIcons.Previous
        // color: undefined,
      }
    },
    checkBox: {

slideDuration: '0.8s'
      },
      icons: {
        previous: _grommetIcons.Previous,
        next: _grommetIcons.Next,
        small: {
          previous: _grommetIcons.FormPrevious,
          next: _grommetIcons.FormNext
        }
      }
    },
    carousel: {
      icons: {
        current: _grommetIcons.Subtract,
        next: _grommetIcons.Next,
        previous: _grommetIcons.Previous
        // color: undefined,
      }
    },
    checkBox: {
      border: {
        color: {
          dark: 'rgba(255, 255, 255, 0.5)',
          light: 'rgba(0, 0, 0, 0.15)'
        },
        radius: '4px',
        width: '2px'
      },
      check: {
        // color: { dark: undefined, light: undefined },
        width: '4px'
      },

size: 'xsmall'
        },
        pad: {
          horizontal: 'small',
          vertical: 'xsmall'
        }
      },
      groupEnd: {
        border: {
          side: 'bottom',
          size: 'xsmall'
        }
      },
      header: {},
      icons: {
        ascending: _FormDown.FormDown,
        contract: _FormUp.FormUp,
        descending: _FormUp.FormUp,
        expand: _FormDown.FormDown
      },
      primary: {
        weight: 'bold'
      },
      resize: {
        border: {
          color: 'border',
          side: 'right'
        }
      }
    },
    diagram: {
      // extend: undefined,

border: 'horizontal',
        pad: {
          horizontal: 'medium',
          vertical: 'small'
        } // extend: undefined,

      } // extend: undefined,

    },
    maskedInput: {// extend: undefined,
    },
    menu: {
      // background: undefined,
      // extend: undefined,
      icons: {
        down: _FormDown.FormDown
      }
    },
    meter: {
      color: 'accent-1' // colors: [],
      // extend: undefined,

    },
    paragraph: {
      small: _extends({}, fontSizing(-1)),
      medium: _extends({}, fontSizing(0)),
      large: _extends({}, fontSizing(1)),
      xlarge: _extends({}, fontSizing(2)),
      xxlarge: _extends({}, fontSizing(4))
    },
    radioButton: {
      border: {