{"componentChunkName":"component---src-templates-posts-js","path":"/foundations/iconography","result":{"data":{"mdx":{"id":"c427de6e-bedb-5ca4-99be-492b96a6d8be","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Icons\",\n  \"path\": \"/foundations/iconography\",\n  \"excerpt\": \"Buttons are aclick The Nebula Icons library presents pixel-perfect, informative and scalable icons. Icons are used throughout the UI to save space, allow for visual clarity, focus and communication.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Masthead = makeShortcode(\"Masthead\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Masthead, {\n    title: \"Icons\",\n    subheader: \"The Nebula Icons library presents pixel-perfect, informative and scalable icons. Icons are used throughout the UI to save space, allow for visual clarity, focus and communication.\",\n    mdxType: \"Masthead\"\n  }), mdx(\"h2\", null, \"Example\"), mdx(\"h3\", null, \"Social Icons\"), mdx(TabbedIcons, {\n    mdxType: \"TabbedIcons\"\n  }), mdx(\"h3\", null, \"Best Practice\"), mdx(\"p\", null, \"Using social media icons, the right way can help establish a strong social media presence with our customers. Follow these best practices before you use them:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Don\\u2019t make any alterations. This includes rotating them and changing their colours or shape. \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Maintain uniform space and size of the icons. \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Give the social icons prominence but be careful not to overshadow your brand either. A recommended location for social icons is within Footer and Blog. \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The minimum touch target should be at least 44 x 44 dp (density independent pixels) with at least 8dp\\tof space between them.\")), mdx(\"h4\", null, \"File Formats\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"SVGs are smaller files that scale to any size without become pixelated. Use this format for icons and vector files that are located above the fold.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"PNGs are used for lazy loading images below the fold which improves site performance.\")), mdx(\"hr\", null), mdx(\"h3\", null, \"Accessibility\"), mdx(\"p\", null, \"Accessibility in design allows users of diverse abilities to navigate, understand, and use your UI.\"), mdx(UsageBlock, {\n    usageType: \"Do\",\n    mdxType: \"UsageBlock\"\n  }, mdx(\"p\", null, \"Include image descriptions so that screen readers can describe an image for an individual who is blind.\"), mdx(\"p\", null, \"Use the approved PSD design kit to download the icons.\"), mdx(\"p\", null, \"If assistive text is required, the containing element should contain both the icon and a span with hidden assistive text describing the icon using the slds-assistive-text class.\")), mdx(UsageBlock, {\n    usageType: \"Don't\",\n    mdxType: \"UsageBlock\"\n  }, mdx(\"p\", null, \"Use one or two words to describe an icon.\"), mdx(\"p\", null, \"Save the icon in the design kit under a different name.\"), mdx(\"p\", null, \"Scale icons to fit your designs. This can cause the proportions to be off-balance and can create unintended hierarchy within the experience. \")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Icons"}}},"pageContext":{"id":"c427de6e-bedb-5ca4-99be-492b96a6d8be"}}}