How to use the @polkadot/ui-settings.availableIcons function in @polkadot/ui-settings

import React, { useEffect, useState, useMemo } from 'react';
import { isLedgerCapable } from '@polkadot/react-api';
import { Button, Dropdown } from '@polkadot/react-components';
import uiSettings, { SettingsStruct } from '@polkadot/ui-settings';

import translate from './translate';
import { createIdenticon, createOption, save, saveAndReload } from './util';
import SelectUrl from './SelectUrl';

interface Props extends I18nProps{
  isModalContent?: boolean;
  onClose?: () => void;
}

const prefixOptions = uiSettings.availablePrefixes.map((o): Option => createOption(o, ['default']));
const iconOptions = uiSettings.availableIcons.map((o): Option => createIdenticon(o, ['default']));
const ledgerConnOptions = uiSettings.availableLedgerConn;
const availableLanguages: SetOption[] = [
  {
    text: 'Default browser language (auto-detect)',
    value: 'default'
  },
  {
    text: 'English',
    value: 'en'
  },
  {
    text: '日本語',
    value: 'ja'
  }
];