You can’t set any image & color icon image in the Magento color dropdown attribute.

If you want to set color images in the dropdown of the color attribute then follow below steps.

Step 1: Override this file in your theme and replace with the below code.

app/design/frontend/[VendorName]/[theme]/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml

<?php
/** @var $block MagentoConfigurableProductBlockProductViewTypeConfigurable*/
$_product    = $block->getProduct();
$_attributes = $block->decorateArray($block->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <?php foreach ($_attributes as $_attribute): ?>
        <?php if($block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) == 'Color'): ?>
            <div class="field configurable required color">
                <label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">
                    <span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>
                </label>
                <div class="control drop-down">
                    <select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-validate="{required:true}"
                            id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"
                            class="super-attribute-select">
                        <option value=""><?= /* @escapeNotVerified */ __('Choose an Option...') ?></option>
                    </select>
                </div>
            </div>
        <?php else: ?>
            <div class="field configurable required">
                <label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">
                    <span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>
                </label>
                <div class="control">
                    <select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-validate="{required:true}"
                            id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"
                            class="super-attribute-select">
                        <option value=""><?= /* @escapeNotVerified */ __('Choose an Option...') ?></option>
                    </select>
                </div>
            </div>
        <?php endif; ?>            
    <?php endforeach; ?>
    <script type="text/x-magento-init">
        {
            "#product_addtocart_form": {
                "configurable": {
                    "spConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>,
                    "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
                        'Magento_ConfigurableProduct') ?: 'replace'; ?>"
                }
            },
            "*" : {
                "Magento_ConfigurableProduct/js/catalog-add-to-cart": {}
            }
        }
    </script>
<?php endif;?>
<?php 
    $objectManager =   MagentoFrameworkAppObjectManager::getInstance();
    $connection = $objectManager->get('MagentoFrameworkAppResourceConnection')->getConnection('MagentoFrameworkAppResourceConnection::DEFAULT_CONNECTION'); 
    $records = $connection->fetchAll("SELECT * FROM color_code");
    // In color_code table have 3 fields like id, color_name, image_url
    // and store data something like this
    // id   color_name      image_url
    // 1    Black           pub/media/catalog/swatches/2/40x40/media/black.png
    // 2    Green           pub/media/catalog/swatches/2/40x40/media/green.png
    // 3    White           pub/media/catalog/swatches/2/40x40/media/white.png
    //print_r($records);
    $storeManager = $objectManager->get('MagentoStoreModelStoreManagerInterface');
    $base_url = $storeManager->getStore()->getBaseUrl();
?>    
<script type="text/javascript">
require(["jquery"], function(jQuery) {
    document.onreadystatechange = function(){
        if(document.readyState=='loaded' || document.readyState=='complete') {
            setTimeout(function(){ 
                
                jQuery('.drop-down').append('<div class="button"></div>');  
                jQuery('.drop-down').append('<ul class="select-list"></ul>');
                jQuery('.drop-down select option').each(function() {
                    var bg = jQuery(this).val();
                    var colortext1 = jQuery(this).text();
                    var colortext1_arr = colortext1.split(' +');
                    var colortext = colortext1_arr[0].replace(/s/g, '');
                    
                    var obj = [];
                    <?php foreach ($records as $color) { ?>
                        obj['<?php echo $color['color_name']; ?>'] = '<?php echo $base_url.$color['image_url']; ?>';  
                    <?php } ?>

                    jQuery('.select-list').append('<li class="clsAnchor"><span class="color-icon" style="background:url(' + obj[colortext] + ') no-repeat center center"></span><span value="' + bg + '" class="' + jQuery(this).attr('class') + '" >' + colortext1_arr[0] + '</span></li>');
                });
                jQuery('.drop-down .button').html('<span class="color-icon" style="background-color:' + jQuery('.drop-down select').find(':selected').val() + '"></span><span class="color-text">' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');              
                jQuery('.drop-down ul li').each(function() {
                    if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) {
                        jQuery(this).addClass('active');
                    }
                });
                jQuery('.drop-down .select-list span').on('click', function() {
                    var dd_text = jQuery(this).text();
                    var dd_val = jQuery(this).attr('value');
                    var dd_color_arr = dd_text.split(' +');
                    var dd_color = dd_color_arr[0].replace(/s/g, '');
                    
                    jQuery('.super-attribute-select option[value='+ dd_val +']').prop('selected',true).trigger('change');

                    var obj1 = [];
                    <?php foreach ($records as $color) { ?>
                        obj1['<?php echo $color['color_name']; ?>'] = '<?php echo $base_url.$color['image_url']; ?>';                         
                    <?php } ?>

                    jQuery('.drop-down .button').html('<span class="color-icon" style="background:url(' + obj1[dd_color] + ') no-repeat center center"></span><span class="color-text">' + dd_color_arr[0] + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');
                    jQuery('.drop-down .select-list span').parent().removeClass('active');
                    jQuery(this).parent().addClass('active');
                    jQuery('.drop-down select[name=options]').val( dd_text );
                    jQuery('.drop-down .select-list li').slideUp();                
                });                
                jQuery('.drop-down .button').on('click', function() {
                    jQuery('.drop-down ul li').slideToggle();
                });
            }, 3000);            
        }
    }
}); 
</script>

Step 2: Add below CSS in your style.css

.color .drop-down { position: relative; width: auto; margin-top: 0; font-family: verdana; }
.color .drop-down select { display: none; }
.color .drop-down .button { border: 1px solid #000; padding: 0px 8px; color: #333; border-radius: 6px; }
.color .drop-down .button .color-icon { display: block; width: 20px; height: 20px; float: left; border-radius: 3px; margin: 6px 10px 6px 0px; }
.color .drop-down .button a { float: right; text-decoration: none; }
.color .drop-down .select-list { position: absolute; top: 0; left: 0; z-index: 1; margin-top: 40px; padding: 0; background-color: #f0f0f0; 
    border-radius: 6px; width: 100%; max-height: 250px; overflow: auto; }
.color .drop-down .select-list li:first-child { margin-top: 1rem; }
.color .drop-down .select-list li { display: none; list-style: none; }
.color .drop-down .select-list li span { display: inline-block; min-height: 32px; padding: 5px 15px 5px 15px; background-position: left 10px center; background-repeat: no-repeat; font-size: 16px; text-align: left; color: #FFF; opacity: 0.7; box-sizing: border-box; color: #333; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; }
.color .drop-down .select-list li span.undefined { padding: 0px 15px !important; }
.color .drop-down .select-list li span:hover, .drop-down .select-list li span:focus { opacity: 1; }
.color .drop-down .select-list li span.color-icon { float: left; margin-left: 10px; border-radius: 5px; }
.color .drop-down .select-list li span.swatch-option { float: right; border: none; margin: 0; }

Step 3: Run below commands.

- php bin/magento setup:upgrade
- php bin/magento cache:clean

That’s it.

After making these changes, you can check your product detail page. You will see color images or icons in the color select boxes.