<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=4395001811813685541&zx=0a47c205-def1-4f54-a0c3-db7de497921b' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=4395001811813685541&zx=0a47c205-def1-4f54-a0c3-db7de497921b' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7224108819422531&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-7224108819422531 -->

</head><body>

Support Icons With Labels

Admin

May 21, 2025

Support Icons With Labels - Support Icons With Labels

Image: uidesign.tips

Icons can often confuse users or get misinterpreted by different people due to their experience level or even due to their culture.

Fix this accessibility issue is by adding a subtle text label near the icon which will describe its usage.

Keep this information in mind especially for mobile interfaces which don't support hover effects.

Like this article? Invite your friends to read :D

Post a Comment

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2838643729-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6tuijjYlvhDSv2UaC61MuiMlnJBw:1748914613786';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4395001811813685541','//www.rawandev.top/2025/05/support-icons-with-labels.html','4395001811813685541');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '4395001811813685541', 'title': 'rawandev.top', 'url': 'https://www.rawandev.top/2025/05/support-icons-with-labels.html', 'canonicalUrl': 'https://www.rawandev.top/2025/05/support-icons-with-labels.html', 'homepageUrl': 'https://www.rawandev.top/', 'searchUrl': 'https://www.rawandev.top/search', 'canonicalHomepageUrl': 'https://www.rawandev.top/', 'blogspotFaviconUrl': 'https://www.rawandev.top/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22rawandev.top - Atom\x22 href\x3d\x22https://www.rawandev.top/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22rawandev.top - RSS\x22 href\x3d\x22https://www.rawandev.top/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22rawandev.top - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/4395001811813685541/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22rawandev.top - Atom\x22 href\x3d\x22https://www.rawandev.top/feeds/2666042852235045855/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-7224108819422531', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/a613144e6ffe5c7e', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '2666042852235045855', 'postImageUrl': 'https://storage.googleapis.com/brandflow-bucket/ui-design-tips/fullsize/support-icons-with-text.jpg', 'pageName': 'Support Icons With Labels', 'pageTitle': 'rawandev.top: Support Icons With Labels'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Support Icons With Labels', 'description': 'Image: uidesign.tips   Icons can often confuse users or get misinterpreted by different people due to their experience level or even due to ...', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uZZh_hE69GKzQmrkmfTk4qmdmxMmpJYAhHenOm1DBvb-8JZhnO2cIt4J-1N2S4GjVQSvfnximitwiFpIL9OThiI-D6vCv9Nv2QX-5J285ZgzzJ-ncUkF508Fo3oE_PMLMCeQBXvqbFjKT__WyaBT7MgnUmTqmMzHCygN2JEcjUBvYX-GN0eg', 'url': 'https://www.rawandev.top/2025/05/support-icons-with-labels.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2666042852235045855}}, {'name': 'widgets', 'data': [{'title': 'Template Code (Do not disable)', 'type': 'HTML', 'sectionId': 'settings', 'id': 'HTML45'}, {'title': 'rawandev.top (Header)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header1'}, {'title': '', 'type': 'LinkList', 'sectionId': 'section', 'id': 'LinkList1'}, {'title': '', 'type': 'LinkList', 'sectionId': 'cta_button', 'id': 'LinkList2'}, {'title': 'Static Page', 'type': 'PageList', 'sectionId': 'footer_widgets', 'id': 'PageList1'}, {'title': 'Social Media', 'type': 'LinkList', 'sectionId': 'footer_widgets', 'id': 'LinkList3'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'footer_widgets', 'id': 'HTML1'}, {'title': '', 'type': 'LinkList', 'sectionId': 'custom_widget_1', 'id': 'LinkList6'}, {'title': '', 'type': 'HTML', 'sectionId': 'billboard_ads', 'id': 'HTML2'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'main', 'id': 'Blog1', 'posts': [{'id': '2666042852235045855', 'title': 'Support Icons With Labels', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uZZh_hE69GKzQmrkmfTk4qmdmxMmpJYAhHenOm1DBvb-8JZhnO2cIt4J-1N2S4GjVQSvfnximitwiFpIL9OThiI-D6vCv9Nv2QX-5J285ZgzzJ-ncUkF508Fo3oE_PMLMCeQBXvqbFjKT__WyaBT7MgnUmTqmMzHCygN2JEcjUBvYX-GN0eg', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Oleh'}, {'name': 'timestamp', 'label': 'pada tanggal'}, {'name': 'comments', 'label': 'Post a Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'author', 'label': 'Oleh'}, {'name': 'timestamp', 'label': 'pada tanggal'}, {'name': 'comments', 'label': 'Post a Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': ''}]}, {'title': 'Advertisement', 'type': 'HTML', 'sectionId': 'top_ads', 'id': 'HTML90'}, {'title': 'Advertisement', 'type': 'HTML', 'sectionId': 'bottom_ads', 'id': 'HTML94'}, {'title': 'Advertisement', 'type': 'HTML', 'sectionId': 'matched_content_ads', 'id': 'HTML75'}, {'title': '', 'type': 'LinkList', 'sectionId': 'custom_widget_2', 'id': 'LinkList5'}, {'title': 'Categories', 'type': 'Label', 'sectionId': 'sidebar', 'id': 'Label1'}, {'title': 'Trends for you', 'type': 'PopularPosts', 'sectionId': 'sidebar', 'id': 'PopularPosts1', 'posts': [{'title': 'How to Apply the Brand Color', 'id': 7372777770210873997}, {'title': 'Testimonials In Signup Forms', 'id': 3554453254351334319}, {'title': 'User Hate Surprises', 'id': 3784122555377951738}, {'title': 'Social Login', 'id': 8719518350662877967}, {'title': 'Preview Product\x27s Value near the CTA', 'id': 4238972292613784141}, {'title': 'Upgrade The Login Screen', 'id': 4747945195806347863}, {'title': 'Inform Users Beforehand', 'id': 223126578656697145}, {'title': 'Prompt User to Scroll', 'id': 7650444305975272289}, {'title': 'Use Real Mockups', 'id': 8509610511267138599}, {'title': 'Prioritize UX', 'id': 2746680487393877261}]}, {'title': 'Recent Posts', 'type': 'HTML', 'sectionId': 'sidebar', 'id': 'HTML3'}, {'title': '', 'type': 'HTML', 'sectionId': 'sticky_sidebar', 'id': 'HTML4'}]}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML45', 'settings', document.getElementById('HTML45'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'section', document.getElementById('LinkList1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList2', 'cta_button', document.getElementById('LinkList2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'footer_widgets', document.getElementById('PageList1'), {'title': 'Static Page', 'links': [{'isCurrentPage': false, 'href': '#', 'title': 'About'}, {'isCurrentPage': false, 'href': '#', 'title': 'Terms'}, {'isCurrentPage': false, 'href': '#', 'title': 'Privacy'}, {'isCurrentPage': false, 'href': '/p/sitemap.html', 'title': 'Sitemap'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList3', 'footer_widgets', document.getElementById('LinkList3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'footer_widgets', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList6', 'custom_widget_1', document.getElementById('LinkList6'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'billboard_ads', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML90', 'top_ads', document.getElementById('HTML90'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML94', 'bottom_ads', document.getElementById('HTML94'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML75', 'matched_content_ads', document.getElementById('HTML75'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList5', 'custom_widget_2', document.getElementById('LinkList5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar', document.getElementById('Label1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'sidebar', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'sticky_sidebar', document.getElementById('HTML4'), {}, 'displayModeFull'));
</script>
</body>