React Styleguidist
The react-styleguidist icon represents the React Styleguidist library, a tool for generating style guides and documentation for React components.
Exports at 35 × 24 px
Code
React Styleguidist in your framework
In any framework. Customize it above, and the code follows.
export const ReactStyleguidistIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="24" viewBox="0 0 256 174" {...props}>
<defs><path id="SVGblPwNdAk" d="M40.822 49.107s-12.744 3.42-19.116 3.42s-18.882-3.42-18.882-3.42A1.965 1.965 0 0 1 .86 47.143V2.677A1.965 1.965 0 0 1 2.824.712h37.998c1.085 0 1.964.88 1.964 1.965v44.466a1.964 1.964 0 0 1-1.964 1.964"/><path id="SVGNzBL808u" d="M53.282 84.012s-11.348 2.281-17.023 2.281c-5.573 0-16.719-2.281-16.719-2.281C9.125 84.012.682 77.85.682 67.435v-30.87C.682 16.85 16.664.868 36.377.868C56.16.87 72.14 16.85 72.14 36.564v30.871c0 10.415-8.443 16.577-18.858 16.577"/><path id="SVGorFsndkp" fill="#00D8FE" d="M69.51 119.463L64.802 95.35c-1.186-10.233-8.907-19.86-18.985-22.577l-.822-.221c-.663-.181-1.403-.389-2.2-.62a139 139 0 0 1-6.667-2.1c-2.555-.882-4.695-1.736-6.259-2.52a14 14 0 0 1-1.534-.872c-.34-.228-.563-.417-.652-.527c-1.853-2.271-2.159-3.534-2.159-7.146c0-.124.061-.275.166-.39c.023-.024 21.316 5.544 21.316 5.544c7.107 1.618 13.287 4.789 18.182 9.685c5.748 5.75 9.619 13.763 11.236 24.265l4.532 33.288c1.244 10.143 5.784 16.854 13.238 16.854c8.239 0 12.684-4.146 12.706-13.108l.812-14.201l17.541-.123v8.609c0 8.44-2.552 16.85-7.231 23.054c-5.237 6.942-12.802 10.828-22.416 10.828a23 23 0 0 1-2.86-.173c-12.215-.745-20.551-9.07-28.215-25.839l-10.944-26.232c-3.613-6.913-11.022-12.41-19.007-15.07l-8.989-1.93c-2.986-.628-6.279-2.3-7.495-3.803c-1.575-1.945-2.6-4.433-2.6-6.56c0-.262.258-1.003.64-1.622c.117-.187.234-.349.342-.475l19.531 5.017c12.28 2.399 19.784 7.682 25.527 17.622z"/><path id="SVGckwuItjE" fill="#00D8FE" d="m185.703 119.463l4.707-24.113c1.186-10.233 8.907-19.86 18.985-22.577q1.515-.405 3.023-.84c2.276-.66 4.55-1.369 6.666-2.1c2.556-.883 4.695-1.737 6.26-2.52a14 14 0 0 0 1.533-.873c.34-.228.563-.417.652-.527c1.853-2.271 2.159-3.534 2.159-7.146a.6.6 0 0 0-.166-.39c-.023-.024-21.315 5.544-21.315 5.544c-7.108 1.618-13.288 4.789-18.183 9.685c-5.748 5.75-9.618 13.763-11.236 24.265l-4.532 33.288c-1.244 10.143-5.784 16.854-13.238 16.854c-8.239 0-12.683-4.146-12.706-13.108l-.811-14.201l-17.542-.123v8.609c0 8.44 2.553 16.85 7.232 23.054c5.236 6.942 12.801 10.828 22.415 10.828q1.478 0 2.86-.173c12.215-.745 20.551-9.07 28.215-25.839l10.944-26.232c3.614-6.913 11.023-12.41 19.007-15.07l8.99-1.93c2.985-.628 6.278-2.3 7.495-3.803c1.574-1.945 2.598-4.433 2.598-6.56c0-.262-.257-1.003-.64-1.622a4 4 0 0 0-.34-.475l-19.532 5.017c-12.28 2.399-19.784 7.682-25.527 17.622z"/></defs><path fill="#053949" d="M75.537 157.505c4.768 6.654 11.494 10.273 20.07 10.273c11.112 0 20.058-4.595 26.172-12.701c5.325-7.06 8.18-16.467 8.18-25.887v-13.348l-26.694.187l-1.07 18.74c0 6.407-2.274 8.538-8 8.538c-4.436 0-7.577-4.643-8.572-12.752l-4.541-33.36C79.31 85.693 74.995 76.76 68.516 70.28c-5.551-5.553-12.514-9.13-20.348-10.918L26.165 53.56c-3.103 0-5.347 2.437-5.347 5.208c0 4.594.545 6.844 3.218 10.12c.765.938 1.999 1.768 3.725 2.633c1.782.892 4.095 1.816 6.83 2.76c2.2.761 4.548 1.494 6.896 2.173q1.45.42 2.908.811c8.373 2.257 14.802 10.298 15.741 18.706l7.626 39.076c1.19 9.134 3.73 16.817 7.775 22.459m54.203-41.021h-25.544l.038 2.39l.242 15.108c0 6.323-4.585 10.203-10.773 10.203c-4.448 0-8.618-4.69-13.591-14.435l-14.445-27.998c-6.448-11.189-15.102-17.303-28.62-19.958l-20.483-5.262c-3.27 0-5.773 4.047-5.773 6.934c0 3.298 1.438 6.792 3.647 9.52c1.995 2.466 6.232 4.616 10.178 5.445l8.599 1.833c6.832 2.307 13.164 7.01 16.11 12.567l10.878 26.077c4.1 8.983 8.296 15.557 13.313 20.302c5.878 5.56 12.802 8.45 21.064 8.45c7.57 0 15.425-2.693 21.501-7.517c6.754-5.362 10.9-12.948 11.451-21.951z"/><use href="#SVGorFsndkp"/><use href="#SVGorFsndkp"/><path fillOpacity=".25" d="M16.414 80.975a12.6 12.6 0 0 0 1.434 1.992c1.32 1.503 4.896 3.174 8.138 3.801l9.76 1.93c8.67 2.662 16.713 8.159 20.637 15.071l11.882 26.232c1.616 3.257 3.26 6.195 4.957 8.822a73 73 0 0 1-.803-4.927l-2.91-14.904l-7.973-15.456c-5.743-9.94-13.248-15.223-25.527-17.622l-19.531-5.016z"/><path fillOpacity=".25" d="M111.606 120.673v13.223c0 9.08-3.662 18.352-16.544 18.352c-7.839 0-15.823-4.825-18.427-22.99l-5.064-34.892c-1.314-10.233-11.5-24.523-22.671-27.24c-.428-.102-15.944-4.677-17.677-5.46c-.69-.312-2.325-1.29-2.424-1.4c-.6-.663-1.053-1.24-1.395-1.815c2.54.654 20.559 5.47 20.559 5.47c6.954 1.618 13 4.789 17.789 9.685c5.624 5.75 9.41 13.763 10.993 24.265l4.434 33.288c1.218 10.143 5.66 16.854 12.952 16.854c8.06 0 12.41-4.146 12.43-13.108l.795-14.201z"/><path fill="#053949" d="M130.43 132.013v-16.47h-27.294v2.353c0 21.18-5.805 30.352-18.824 30.352c-11.488 0-19.39-8.207-24.42-21.672c-5.74-15.362-14.442-22.328-31.41-22.328H5.254c-2.935 0-5.253 2.421-5.253 5.345a13.73 13.73 0 0 0 4.04 9.739a13.77 13.77 0 0 0 9.766 4.036l14.733-.06c3.062 0 6.021 2.24 9.061 6.82c2.534 3.817 4.668 8.34 8.06 16.559c3.04 7.368 7.21 13.615 12.784 18.321c6.82 5.76 15.406 8.888 25.868 8.888c11.263 0 22.72-4.106 31.373-11.293c9.34-7.76 14.745-18.467 14.745-30.59"/><path fill="#00D8FE" d="M125.724 120.248v11.765c0 10.671-4.746 20.075-13.046 26.97c-7.805 6.483-18.197 10.207-28.366 10.207c-9.352 0-16.862-2.737-22.832-7.777c-4.94-4.17-8.696-9.8-11.47-16.522c-3.507-8.498-5.73-13.21-8.49-17.365c-3.821-5.759-8.002-8.925-12.991-8.925l-14.733.061a9.06 9.06 0 0 1-6.43-2.66a9.02 9.02 0 0 1-2.66-6.41c0-.368.258-.638.547-.638h23.23c14.863 0 21.909 5.64 27 19.269c2.433 6.513 5.629 12.125 9.747 16.402c5.165 5.364 11.524 8.33 19.082 8.33c15.635 0 23.02-10.83 23.504-32.707z"/><path fillOpacity=".25" d="M4.851 109.159c.43.545 1.036 1.035 1.794 1.723c1.621 1.47 3.802 2.308 6.138 2.308h19.294c10.755 0 16.347 8.402 23.371 23.87c2.648 5.828 9.869 19.894 30.276 19.894s26.353-19.922 26.353-29.176v-7.53h-4.261c-.485 21.877-7.869 32.706-23.504 32.706c-7.558 0-13.917-2.965-19.082-8.33c-4.118-4.276-7.314-9.888-9.747-16.401c-5.091-13.629-12.137-19.269-27-19.269H5.253c-.154 0-.3.077-.402.205"/><path fill="#053949" d="M179.675 157.505c-4.768 6.654-11.494 10.273-20.069 10.273c-11.113 0-20.06-4.595-26.173-12.701c-5.325-7.06-8.18-16.467-8.18-25.887v-13.348l26.694.187l1.07 18.74c0 6.407 2.274 8.538 8 8.538c4.437 0 7.577-4.643 8.572-12.752l4.541-33.36c1.772-11.502 6.087-20.435 12.566-26.916c5.552-5.553 12.514-9.13 20.349-10.918l22.003-5.802c3.103 0 5.346 2.437 5.346 5.208c0 4.594-.545 6.844-3.218 10.12c-.765.938-1.999 1.768-3.725 2.633c-1.781.892-4.095 1.816-6.83 2.76c-2.2.761-4.548 1.494-6.895 2.173q-1.45.42-2.909.811c-8.373 2.257-14.801 10.298-15.74 18.706l-7.627 39.076c-1.189 9.134-3.73 16.817-7.775 22.459m-54.203-41.021h25.544l-.038 2.39l-.242 15.108c0 6.323 4.585 10.203 10.774 10.203c4.448 0 8.618-4.69 13.59-14.435l14.445-27.998c6.448-11.189 15.102-17.303 28.62-19.958l20.483-5.262c3.271 0 5.773 4.047 5.773 6.934c0 3.298-1.438 6.792-3.646 9.52c-1.996 2.466-6.233 4.616-10.18 5.445l-8.597 1.833c-6.832 2.307-13.165 7.01-16.11 12.567l-10.88 26.077c-4.1 8.983-8.295 15.557-13.312 20.302c-5.878 5.56-12.802 8.45-21.064 8.45c-7.569 0-15.424-2.693-21.501-7.517c-6.754-5.362-10.9-12.948-11.451-21.951z"/><use href="#SVGckwuItjE"/><use href="#SVGckwuItjE"/><path fillOpacity=".25" d="M238.798 80.975a12.7 12.7 0 0 1-1.433 1.992c-1.322 1.503-4.897 3.174-8.139 3.801l-9.76 1.93c-8.669 2.662-16.713 8.159-20.637 15.071l-11.882 26.232c-1.616 3.257-3.26 6.195-4.956 8.822a73 73 0 0 0 .802-4.927l2.91-14.904l7.973-15.456c5.743-9.94 13.248-15.223 25.527-17.622l19.532-5.017z"/><path fillOpacity=".25" d="M143.606 120.673v13.223c0 9.08 3.662 18.352 16.544 18.352c7.84 0 15.824-4.825 18.427-22.99l5.064-34.892c1.314-10.233 11.501-24.523 22.671-27.24c.428-.102 15.944-4.677 17.678-5.46c.689-.312 2.324-1.29 2.424-1.4c.6-.663 1.052-1.24 1.394-1.815c-2.54.654-20.559 5.47-20.559 5.47c-6.953 1.618-13 4.789-17.789 9.685c-5.623 5.75-9.41 13.763-10.993 24.265l-4.434 33.288c-1.217 10.143-5.659 16.854-12.952 16.854c-8.06 0-12.409-4.146-12.43-13.108l-.795-14.201z"/><path fill="#053949" d="M124.783 132.013v-16.47h27.294v2.353c0 21.18 5.804 30.352 18.823 30.352c11.489 0 19.39-8.207 24.42-21.672c5.74-15.362 14.442-22.328 31.41-22.328h23.23c2.935 0 5.252 2.421 5.252 5.345a13.73 13.73 0 0 1-4.04 9.739a13.77 13.77 0 0 1-9.766 4.036l-14.733-.06c-3.062 0-6.021 2.24-9.061 6.82c-2.534 3.817-4.668 8.34-8.06 16.559c-3.04 7.368-7.209 13.615-12.784 18.321c-6.82 5.76-15.406 8.888-25.868 8.888c-11.263 0-22.72-4.106-31.372-11.293c-9.342-7.76-14.745-18.467-14.745-30.59"/><path fill="#00D8FE" d="M129.488 120.248v11.765c0 10.671 4.746 20.075 13.047 26.97c7.804 6.483 18.196 10.207 28.365 10.207c9.352 0 16.862-2.737 22.832-7.777c4.94-4.17 8.697-9.8 11.47-16.522c3.508-8.498 5.73-13.21 8.49-17.365c3.821-5.759 8.003-8.925 12.991-8.925l14.733.061a9.06 9.06 0 0 0 6.431-2.66a9.02 9.02 0 0 0 2.66-6.41c0-.368-.259-.638-.548-.638h-23.23c-14.863 0-21.909 5.64-27 19.269c-2.433 6.513-5.629 12.125-9.747 16.402c-5.165 5.364-11.524 8.33-19.082 8.33c-15.635 0-23.02-10.83-23.504-32.707z"/><path fillOpacity=".25" d="M250.36 109.159c-.428.545-1.034 1.035-1.793 1.723c-1.621 1.47-3.802 2.308-6.137 2.308h-19.294c-10.756 0-16.348 8.402-23.372 23.87c-2.648 5.828-9.868 19.894-30.276 19.894c-20.407 0-26.352-19.922-26.352-29.176v-7.53h4.26c.485 21.877 7.869 32.706 23.504 32.706c7.558 0 13.917-2.965 19.083-8.33c4.117-4.276 7.313-9.888 9.746-16.401c5.091-13.629 12.137-19.269 27-19.269h23.23c.154 0 .3.077.402.205"/><path fill="#00D8FE" d="M145.663 125.415s-12.743 3.42-19.116 3.42c-6.371 0-18.881-3.42-18.881-3.42a1.965 1.965 0 0 1-1.965-1.965V78.984a1.965 1.965 0 0 1 1.965-1.965h37.997c1.085 0 1.965.88 1.965 1.965v44.466a1.964 1.964 0 0 1-1.965 1.965"/><path fill="#043849" d="M139.68 132.646c-1.524.327-2.977.615-4.35.86c-3.599.645-6.501.976-8.783.976c-2.26 0-5.109-.325-8.622-.957q-2.082-.375-4.412-.883A166 166 0 0 1 106.69 131a7.61 7.61 0 0 1-6.635-7.55V78.985a7.61 7.61 0 0 1 7.612-7.612h37.997a7.61 7.61 0 0 1 7.612 7.612v44.463a7.61 7.61 0 0 1-6.656 7.555q-3.451.893-6.939 1.644m6.168-7.24a1.965 1.965 0 0 0 1.78-1.958V78.984c0-1.085-.88-1.965-1.965-1.965h-37.997c-1.085 0-1.965.88-1.965 1.965v44.466c0 1.015.776 1.862 1.776 1.956l.247.023l.239.065c.048.014.103.028.25.067q3.236.85 6.503 1.564c1.486.323 2.893.605 4.21.842c3.21.578 5.753.868 7.621.868c1.89 0 4.49-.296 7.788-.887a124 124 0 0 0 4.158-.823a167 167 0 0 0 6.903-1.64l.223-.058z"/><g transform="translate(104.841 76.307)"><mask id="SVGCG2GwcEN" fill="#fff"><use href="#SVGblPwNdAk"/></mask><path fillOpacity=".25" d="M.647 14.765H11L5.353 54.294H.647z" mask="url(#SVGCG2GwcEN)"/></g><ellipse cx="105.232" cy="98.755" fill="#FFF" rx="11.785" ry="11.763"/><path fill="#063A49" d="M105.232 113.342c-8.067 0-14.608-6.53-14.608-14.587s6.541-14.586 14.608-14.586s14.608 6.53 14.608 14.586s-6.541 14.587-14.608 14.587m0-5.647c4.95 0 8.961-4.004 8.961-8.94s-4.01-8.939-8.961-8.939c-4.95 0-8.961 4.003-8.961 8.94c0 4.935 4.01 8.939 8.961 8.939"/><circle cx="105.232" cy="98.765" r="3.688" fill="#053949"/><ellipse cx="147.585" cy="98.755" fill="#FFF" rx="11.785" ry="11.763"/><path fill="#063A49" d="M147.585 113.342c-8.067 0-14.609-6.53-14.609-14.587s6.542-14.586 14.609-14.586s14.608 6.53 14.608 14.586s-6.541 14.587-14.608 14.587m0-5.647c4.95 0 8.961-4.004 8.961-8.94s-4.01-8.939-8.961-8.939c-4.95 0-8.961 4.003-8.961 8.94c0 4.935 4.01 8.939 8.96 8.939"/><circle cx="147.585" cy="98.765" r="3.688" fill="#053949"/><path fill="#043849" d="M138.05 95.505q-1.92.311-3.853.572c-3.162.423-5.707.641-7.685.641c-1.954 0-4.463-.218-7.574-.643q-1.786-.243-3.789-.572a192 192 0 0 1-5.943-1.072c-13.818-.249-23.918-9.297-23.918-22.218v-30.87C85.288 18.508 103.798 0 126.631 0c22.885 0 41.409 18.494 41.409 41.342v30.871c0 12.924-10.106 21.974-23.93 22.219q-3.023.584-6.06 1.073m5.742-6.716c11.012-.106 18.601-6.84 18.6-16.576v-30.87c0-19.728-15.993-35.696-35.761-35.696c-19.714 0-35.695 15.981-35.695 35.695v30.871c0 9.734 7.587 16.469 18.596 16.575l.266.003l.26.052l.223.044q2.884.568 5.782 1.043q1.93.316 3.638.55c2.88.393 5.156.591 6.811.591c1.684 0 4-.198 6.933-.591a142 142 0 0 0 3.706-.55q3.073-.495 6.129-1.09l.253-.049z"/><g transform="translate(90.253 4.778)"><mask id="SVG8f0pPUfj" fill="#fff"><use href="#SVGNzBL808u"/></mask><path fill="#00D8FE" d="M53.282 84.012s-11.348 2.281-17.023 2.281c-5.573 0-16.719-2.281-16.719-2.281C9.125 84.012.682 77.85.682 67.435v-30.87C.682 16.85 16.664.868 36.377.868C56.16.87 72.14 16.85 72.14 36.564v30.871c0 10.415-8.443 16.577-18.858 16.577" mask="url(#SVG8f0pPUfj)"/></g><g transform="translate(90.253 4.778)"><path fillOpacity=".25" d="M10.517 66.494V26.211c0-18.056 13.41-32.972 30.811-35.354a36 36 0 0 0-4.883-.341h-.068C16.664-9.484.682 6.496.682 26.21v40.283c0 10.415 8.443 18.858 18.858 18.858h9.834c-10.414 0-18.857-8.443-18.857-18.858" mask="url(#SVG8f0pPUfj)"/></g><g transform="translate(90.253 4.778)"><circle cx="32.57" cy="65.982" r="3.688" fillOpacity=".25" mask="url(#SVG8f0pPUfj)"/></g><g transform="translate(90.253 4.778)"><circle cx="22.688" cy="46.688" r="3.688" fillOpacity=".25" mask="url(#SVG8f0pPUfj)"/></g><g transform="translate(90.253 4.778)"><circle cx="36.411" cy="28.685" r="3.688" fillOpacity=".25" mask="url(#SVG8f0pPUfj)"/></g><g transform="translate(90.253 4.778)"><circle cx="49.982" cy="47.629" r="3.688" fillOpacity=".25" mask="url(#SVG8f0pPUfj)"/></g>
</svg>
);SVG Logos
More like it
Icons that share its tags, in the same style.
Search SVG Logos
Skip the copy and paste. With Pro, your AI agent finds and installs any SVG Logos icon from a prompt.
Get ProTags
Browse by tag
React Styleguidist is tagged programming, code, react and 2 more. Related tags follow; each opens its icons from every library.
Pricing
SVG Logos MCP, with Pro
Ask for React Styleguidist or any of 2,063 SVG Logos icons and your agent installs it. The MCP comes with every Pro plan, with 6,000+ blocks and 14 premium templates. The icons stay free.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
What the React Styleguidist icon means and where it's used, then how to install, style, label and license it.
The react-styleguidist icon represents the React Styleguidist library, a tool for generating style guides and documentation for React components. It symbolizes maintainable and well-documented code.
In real-world applications, icons like react-styleguidist appear on developer websites, tech blogs, and coding forums related to React and style guides.
From a UX perspective, the react-styleguidist icon communicates a sense of organized and maintainable code, helping users understand that they can efficiently document and style their React components.
React Styleguidist is one of 2,063 icons in SVG Logos, made by Gil Barbara and released under CC0. It is drawn on a 256 × 174 grid.
Sign in (it's free), then open Get icon, Install with shadcn CLI, and pick your package manager to copy the command. It adds ReactStyleguidistIcon to components/icons/logos-react-styleguidist.tsx: one file, a size prop (24 by default) and every SVG prop, with no icon package.
Copy it as React (from Get icon, or the Code section): a typed ReactStyleguidistIcon component you paste into your project, with no package to install. Only the icons you import reach your bundle. It works in Next.js and any React app.
Open Get icon, then Copy as code, and pick Vue, Svelte, Angular, Solid or Preact; the Code section shows each one too. Every version is one self-contained component with the SVG inside, and SVG and data URL copies are there for plain HTML and CSS.
With Pro, the shadcn.io MCP server lets Claude Code, Cursor or any MCP client find the React Styleguidist icon, or any of 2,063 SVG Logos icons, and install it from a prompt.
It's multicolor, so it keeps its own colors.
Set width and height on the component, or a class like size-6. It's drawn on a 256 × 174 grid, so it stays sharp at any size. Customize also sets the size it exports at, its padding and rotation.
Yes. It keeps its own colors in light and dark mode, so check it against both backgrounds. The icon is a vector, so it needs no separate dark asset.
Next to a visible label it's decoration: add aria-hidden="true" so screen readers skip it. Standing alone, as in an icon button, give the button a name instead, like aria-label="React Styleguidist", so screen readers say what it does.
Yes. ReactStyleguidistIcon passes every SVG prop to the svg element, so <ReactStyleguidistIcon aria-hidden="true" /> works, and so do role="img" with aria-label, or a title child, when it carries meaning on its own.
Yes. Open Get icon, then Download file: SVG for code or design tools like Figma; PNG, WebP or JPEG at 512px; or an ICO favicon with 16, 32 and 48px inside. Each one uses what you set in Customize.
CC0 puts the icons in the public domain: use them anywhere, with no conditions. The full terms are in the license, linked on this page.
No. CC0 gives the icons to the public domain, so no credit and no notice is required. Icons installed with the shadcn CLI still start with a comment naming SVG Logos, Gil Barbara and the license.
Yes. Copying and downloading it is free, and the shadcn CLI install only needs a free account.
Its tags are programming, code, react, library and documentation. Each tag page lists the icons that carry it from every library, which is the quickest way to find a match for React Styleguidist in another set.
4.9 out of 5 from 150+ developers
Install React Styleguidist from a prompt
MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.
Get Pro