[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Ficon":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":289,"links":290,"dates":333},"\u002Fexamples\u002Fcomponents\u002Ficon","collection","components",true,{"example_count":9,"app_count":10},40,10,{"id":12,"title":13,"description":14},261,"Icon","Explore how interfaces use symbols alongside actions and information. Look at how icon shape, size, and placement relate to nearby labels and the meaning of the control.",{"title":16,"description":17,"og_image":18},"Icon UI examples - Nicelydone","Icon UI design examples from SaaS apps. Explore how interfaces use symbols alongside actions and information. Look at how icon shape, size, and placement…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9189d310-929b-44fe-b92a-a105fddc632f.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Icon UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Icon UI design examples from SaaS apps. Explore how interfaces use symbols alongside actions and information. Look at how icon shape, size, and placement relate to nearby labels and the meaning of…",[32],{"title":33,"description":14,"links":34},"About Icon",[],[36],"40 UI components",[38,68,97,122,147,169,194,216,240,259],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"574d349c-42f0-430d-863f-0a7808535e9a","Asana UI component","A simple icon with a green square and an arrow","\u002Fexamples\u002Fapps\u002Fasana\u002Fcomponents",323,286,"UI component from Asana","component",[48],{"id":12,"title":13,"slug":49},"icon",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"asana","Asana","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fasana-a1a0b7cd.png","The easiest way for teams to track their work",[56,60,64],{"id":57,"title":58,"slug":59},23,"Collaboration","collaboration",{"id":61,"title":62,"slug":63},29,"Task Management","task-management",{"id":65,"title":66,"slug":67},30,"Productivity","productivity",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"68a67df6-2560-4add-a8fa-852f5541513f","Developer tools icon","A stylized icon featuring a terminal window and a gear, representing developer tools or settings.","\u002Fexamples\u002Fapps\u002Fstripe\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fef92fff8-cb90-47af-85bb-0c0e501c8161.png",207,209,"Developer tools icon from Stripe",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"stripe","Stripe","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fstripe-ac594414.png","Payments infrastructure for the internet",[85,89,93],{"id":86,"title":87,"slug":88},36,"Finance","finance",{"id":90,"title":91,"slug":92},37,"Developer APIs","developer-apis",{"id":94,"title":95,"slug":96},39,"Payments","payments",{"uuid":98,"title":99,"description":100,"canonical_path":101,"image":102,"width":103,"height":104,"image_alt":105,"kind":46,"categories":106,"app":108},"250ffdcb-ae88-46ea-9eca-586943450413","Action icon row","A horizontal row of four outline icons: heart, comment with notification dot, info, and more options.","\u002Fexamples\u002Fapps\u002Frefrakt\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdf1087ac-0e00-4ec3-9dd5-0cd37a94967a.png",396,156,"Action icon row from Refrakt",[107],{"id":12,"title":13,"slug":49},{"slug":109,"title":110,"logo":111,"baseline":112,"categories":113},"refrakt","Refrakt","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Frefrakt-4bd9bf02.png","A more meaningful home for photography",[114,118],{"id":115,"title":116,"slug":117},49,"Social Network","social-network",{"id":119,"title":120,"slug":121},31,"Photography","photography",{"uuid":123,"title":124,"description":125,"canonical_path":126,"image":127,"width":128,"height":129,"image_alt":130,"kind":46,"categories":131,"app":133},"81dd2e68-f978-4902-b492-c96ecaa04dff","Luma UI component","A simple alarm icon on a card","\u002Fexamples\u002Fapps\u002Fluma\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8ceaec58-8242-41da-8e1d-fc72e82ac7db.png",237,239,"UI component from Luma",[132],{"id":12,"title":13,"slug":49},{"slug":134,"title":135,"logo":136,"baseline":137,"categories":138},"luma","Luma","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fluma-64c4b80f.png","Delightful events start here.",[139,143],{"id":140,"title":141,"slug":142},26,"Events","events",{"id":144,"title":145,"slug":146},4,"Ticketing","ticketing",{"uuid":148,"title":149,"description":150,"canonical_path":151,"image":152,"width":153,"height":154,"image_alt":155,"kind":46,"categories":156,"app":158},"2382d739-1eec-49f3-88d8-7be48bd9b77e","Reaction toolbar","A vertical floating toolbar containing various reaction icons and a comment button. A tooltip labeled 'Applaud' is visible next to the clapping hands icon.","\u002Fexamples\u002Fapps\u002Fscribe\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1694aea7-df5d-4835-90f6-79e474f1d3fb.png",382,959,"Reaction toolbar from Scribe",[157],{"id":12,"title":13,"slug":49},{"slug":159,"title":160,"logo":161,"baseline":162,"categories":163},"scribe","Scribe","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fscribe-4679b940.png","Turn any process into a step-by-step guide, instantly",[164,165],{"id":57,"title":58,"slug":59},{"id":166,"title":167,"slug":168},22,"Knowledge Management","knowledge-management",{"uuid":170,"title":171,"description":172,"canonical_path":173,"image":174,"width":175,"height":176,"image_alt":177,"kind":46,"categories":178,"app":180},"b6700edd-32c2-4b96-a5d6-3906ea4b9779","Security icon","A blue outline icon of a padlock with a right-pointing arrow in a light blue circle overlapping the bottom right corner.","\u002Fexamples\u002Fapps\u002Fvercel\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7347c15c-4273-42a6-99bc-37d541696ca1.png",199,198,"Security icon from Vercel",[179],{"id":12,"title":13,"slug":49},{"slug":181,"title":182,"logo":183,"baseline":184,"categories":185},"vercel","Vercel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fvercel-c74059ac.png","Develop. Preview. Ship.",[186,190],{"id":187,"title":188,"slug":189},48,"Developer Tools","developer-tools",{"id":191,"title":192,"slug":193},7,"Web Development","web-development",{"uuid":195,"title":196,"description":197,"canonical_path":198,"image":199,"width":200,"height":201,"image_alt":202,"kind":46,"categories":203,"app":205},"8ca8c059-2c9a-4313-90d7-8d626f793f10","Icon row","A horizontal row of five outline icons.","\u002Fexamples\u002Fapps\u002Freadcv\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8ca8c059-2c9a-4313-90d7-8d626f793f10.png",484,167,"Icon row from Read.cv",[204],{"id":12,"title":13,"slug":49},{"slug":206,"title":207,"logo":208,"baseline":209,"categories":210},"readcv","Read.cv","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Freadcv-9d9977cf.png","An ever extensible professional profile and personal archive",[211,212],{"id":115,"title":116,"slug":117},{"id":213,"title":214,"slug":215},74,"Employment","employment",{"uuid":217,"title":218,"description":219,"canonical_path":220,"image":221,"width":222,"height":223,"image_alt":224,"kind":46,"categories":225,"app":227},"1d06d158-57c6-49ef-930d-84f75f96fbe9","Contact sales icon","A stylized illustration of a telephone receiver with a speech bubble, used to represent contacting sales or support.","\u002Fexamples\u002Fapps\u002Fcoda\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1d06d158-57c6-49ef-930d-84f75f96fbe9.png",219,227,"Contact sales icon from Coda",[226],{"id":12,"title":13,"slug":49},{"slug":228,"title":229,"logo":230,"baseline":231,"categories":232},"coda","Coda","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcoda-1278fa67.png","The doc for everyone, meet the evolution of docs",[233,234,235,236],{"id":57,"title":58,"slug":59},{"id":65,"title":66,"slug":67},{"id":166,"title":167,"slug":168},{"id":237,"title":238,"slug":239},96,"No code","no-code",{"uuid":241,"title":242,"description":243,"canonical_path":244,"image":245,"width":246,"height":246,"image_alt":247,"kind":46,"categories":248,"app":250},"e9a602da-6949-43d9-870d-c330ba513b94","Aboard UI component","A simple icon button","\u002Fexamples\u002Fapps\u002Faboard\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe9a602da-6949-43d9-870d-c330ba513b94.png",288,"UI component from Aboard",[249],{"id":12,"title":13,"slug":49},{"slug":251,"title":252,"logo":253,"baseline":254,"categories":255},"aboard","Aboard","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fea3ae2e7-7419-4926-acae-b179668f6172.png","Bring joy to your workplace with Aboard",[256],{"id":10,"title":257,"slug":258},"Human resources","human-resources",{"uuid":260,"title":261,"description":262,"canonical_path":263,"image":264,"width":265,"height":266,"image_alt":267,"kind":46,"categories":268,"app":270},"948b65ef-3b87-4249-bc2b-3c6af5b19f4e","Feature Grid","A grid of twelve feature highlights, each containing an icon inside a rounded square border, a bold title, and a short descriptive text.","\u002Fexamples\u002Fapps\u002Fdeepnote\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F948b65ef-3b87-4249-bc2b-3c6af5b19f4e.png",2569,1363,"Feature Grid from Deepnote",[269],{"id":12,"title":13,"slug":49},{"slug":271,"title":272,"logo":273,"baseline":274,"categories":275},"deepnote","Deepnote","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdeepnote-144edbc1.png","Data science notebook for teams",[276,280,284,285],{"id":277,"title":278,"slug":279},57,"Big data","big-data",{"id":281,"title":282,"slug":283},46,"Analytics","analytics",{"id":57,"title":58,"slug":59},{"id":286,"title":287,"slug":288},77,"Machine learning","machine-learning",[],[291,294,297,300,303,306,309,312,315,318,321,324,327,330],{"label":292,"to":293},"Landing Page","\u002Fexamples\u002Fpages\u002Flanding-page",{"label":295,"to":296},"Contact Page","\u002Fexamples\u002Fpages\u002Fcontact-page",{"label":298,"to":299},"Developer Portal","\u002Fexamples\u002Fpages\u002Fdeveloper-portal",{"label":301,"to":302},"Product Page","\u002Fexamples\u002Fpages\u002Fproduct-page",{"label":304,"to":305},"Asana design examples","\u002Fexamples\u002Fapps\u002Fasana",{"label":307,"to":308},"Stripe design examples","\u002Fexamples\u002Fapps\u002Fstripe",{"label":310,"to":311},"Refrakt design examples","\u002Fexamples\u002Fapps\u002Frefrakt",{"label":313,"to":314},"Luma design examples","\u002Fexamples\u002Fapps\u002Fluma",{"label":316,"to":317},"Scribe design examples","\u002Fexamples\u002Fapps\u002Fscribe",{"label":319,"to":320},"Vercel design examples","\u002Fexamples\u002Fapps\u002Fvercel",{"label":322,"to":323},"Read.cv design examples","\u002Fexamples\u002Fapps\u002Freadcv",{"label":325,"to":326},"Coda design examples","\u002Fexamples\u002Fapps\u002Fcoda",{"label":328,"to":329},"Aboard design examples","\u002Fexamples\u002Fapps\u002Faboard",{"label":331,"to":332},"Deepnote design examples","\u002Fexamples\u002Fapps\u002Fdeepnote",{"published_at":334,"updated_at":335},"2022-08-24T18:11:19.000Z","2026-09-25T00:10:12.000Z"]